很多網站是全背景圖片的，而且適應各種主流解析度，給人一種乾淨大氣的感覺，實屬設計派的一個耍酷良方，下面介紹幾種實現全屏圖片自適應縮放背景圖片的方法。

1.帥氣簡單的CSS3方法

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 Whatever+
• IE 9+
• Opera 10+
• Firefox 3.6+

2.只使用CSS之方法一

img.bg 
{
    min-height: 100%;
    min-width: 1024px;

    width: 100%;
    height: auto;

    position: fixed;
    top: 0;
    left: 0;
}

@media screen and (max-width: 1024px) 
{
    img.bg 
    {
        left: 50%;
        margin-left: -512px
 
;
    }
}

• 以下瀏覽器的任何版本: Safari / Chrome / Opera / Firefox
• IE 6: （各種方案奈我何？！）
• IE 7/8: 大部分工作，小螢幕的時候全屏，但是不是居中
• IE 9: 沒問題

3.只使用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%;
}

• Safari / Chrome / Firefox
• IE 8+
• Opera

4.jQuery方法

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

$(window).load(function() {
    var theWindow = $(window),
        $bg = $("#bg"),
        aspectRatio = $bg.width()/$bg.height();

    function resizeBg() 
    {
        if ( (theWindow.width()/theWindow.height()) 
            $bg.removeClass()
               .addClass('bgheight');
        }else{
            $bg.removeClass()
               .addClass('bgwidth');
        }
    }
    theWindow.resize(function() {
        resizeBg();
    }).trigger("resize");
});

• IE7+
• 任何除了IE的瀏覽器的任何版本