Summarize the method of HTML full screen background

Full-screen background is a popular web design style at the moment, and there are basically two methods to implement such a full-screen background. One is achieved through CSS (CSS3.0 provides us with more For rich CSS style control); the other is to implement it through the familiar javascript. Here, jQuery is used directly for the convenience of the code. Since jQuery is mentioned, we can imagine that since we can write in jQuery, there must be similarly written jQuery plug-ins waiting for us to use on the Internet.

Method 1. Use the new features of CSS3.0 style to achieve full screen in Beijing (ie6-8 is not supported)

html {
      background: url(images/bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

or:

html{
    background:url('background.jpg') no-repeat center center;
    min-height:100%;
    background-size:cover;
}
body{
    min-height:100%;
}

Principle: Set html and body to The minimum height is 100%. Use background-size:cover in CSS3 to set the background image to cover full-screen mode.

Compatibility:

Safari 3+

Chrome Whatever+

IE 9+

Opera 10+

Firefox 3.6+

Method 2, use jQuery to implement

HTML code:

<img src="images/bg.jpg" id="bg" alt="">

CSS code:

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

jQuery code:

$(window).load(function() {  
    var theWindow        = $(window),
        $bg              = $("#bg"),
        aspectRatio      = $bg.width() / $bg.height();
                                                                                                                                                                            
    function resizeBg() {
                                                                                                                                                    
        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg
                .removeClass()
                .addClass(&#39;bgheight&#39;);
        } else {
            $bg
                .removeClass()
                .addClass(&#39;bgwidth&#39;);
        }
                                                                                                                                                                
    }
                                                                                                                                                                            
    theWindow.resize(resizeBg).trigger("resize");
});

Compatibility:

IE7+

Any desktop browser

Method 2, use jQuery to implement (attached) [Use jQuery plug-in jQuery.fullBg]

First comes the plugin code:

/**
 * jQuery.fullBg
 * Version 1.0
 * Copyright (c) 2010 c.bavota - http://bavotasan.com
 * Dual licensed under MIT and GPL.
 * Date: 02/23/2010
**/
(function($) {
  $.fn.fullBg = function(){
    var bgImg = $(this);      
                                                   
    function resizeImg() {
      var imgwidth = bgImg.width();
      var imgheight = bgImg.height();
                                                           
      var winwidth = $(window).width();
      var winheight = $(window).height();
                                                       
      var widthratio = winwidth / imgwidth;
      var heightratio = winheight / imgheight;
                                                           
      var widthdiff = heightratio * imgwidth;
      var heightdiff = widthratio * imgheight;
                                                       
      if(heightdiff>winheight) {
        bgImg.css({
          width: winwidth+'px',
          height: heightdiff+'px'
        });
      } else {
        bgImg.css({
          width: widthdiff+'px',
          height: winheight+'px'
        });   
      }
    }
    resizeImg();
    $(window).resize(function() {
      resizeImg();
    });
  };
})(jQuery)

There is only a little CSS needed for this one:

.fullBg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
#maincontent {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
}

If you want your background to stay fixed you can change the .fullBG CSS to this:

.fullBg {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

For the HTML markup, you can just add an image tag with an id or class, but you also need to add a div that contains your main content or else it won't work properly. This is the bare minimum:

<img src="your-background-image.jpg" alt="" id="background" />
<div id="maincontent">
  <!-- Your site content goes here -->
</div>

To call the jQuery function, add this to the bottom of your web page, right before the closing body tag:

<script type="text/javascript">
$(window).load(function() {
    $("#background").fullBg();
});
</script>

Once again, this plugin is pretty simple so no options are available. It pretty much just does what it does.

The above is the detailed content of Summarize the method of HTML full screen background. For more information, please follow other related articles on the PHP Chinese website!