[转载]完美的背景图全屏代码

具有以下特点：

• 填满整个页面，没有空白空间
• 能缩放图像
• 保留图像尺寸比例
• 图像居中
• 不因图像原因产生滚动条
• 更多地支持全部浏览器
• 不使用类似FLash的东西

帅气，简单，先进的css3方法

CSS

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;
}

支持

Safari 3+
Chrome any+
IE 9 +
Opera 10+ (Opera 9.5 supported background-size but not the keywords)
Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
查看Demo

CSS-Only Technique #1

CSS

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
    
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
    
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

支持
Any version of good browsers: Safari / Chrome / Opera / Firefox
IE 6: Borked - but probably fixable if you use some kind of fixed positioning shim
IE 7/8: Mostly works, doesn't center at small sizes but fills screen fine
IE 9: Works

CSS-Only Technique #2

HTML

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

CSS

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

注：使用DIV应该是为了能够使图片居中，单独img达不到

JQuery

HTML

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

CSS

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

Javascript代码

$(window).load(function() {    

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

});

支持
Safari / Chrome / Firefox (didn't test very far back, but recent versions are fine)
IE 8+
Opera (any version) and IE both fail in the same way (wrongly positioned, not sure why)
如果通过Js添加的图片，需要添加 {width: auto; and height: auto;}以便支持 in IE 8, 9, or 10.

转载自：https://css-tricks.com/perfect-full-page-background-image/

转载于:https://www.cnblogs.com/NewZi/p/perfect-full-page-image-background.html