基於html5背景圖片自適應代碼

基於html5背景圖片自適應代碼是一款背景不隨滾動條滾動，會根據分辨率不同自動匹配對應的背景圖片。效果圖如下：

在線預覽    源碼下載

實現的代碼。

css代碼：

.jawbone-hero .jawbone-hero-image {
    position:absolute;
    background:transparent none no-repeat scroll 50% 0;
    background-size:cover;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    margin:0 auto;
    z-index:-1
}
.jawbone-hero {
    height:100%;
    min-height:550px
}
.jawbone-hero .jawbone-hero-image {
    position:fixed
}
#h1.jawbone-takeover-minimulti .jawbone-hero-image {
    background-image:url(../images/hero-600.jpg)
}
@media (min-width: 600px) {
    #h1.jawbone-takeover-minimulti .jawbone-hero-image {
    background-image:url(../images/hero-1280.jpg)
}
}@media (min-width: 1016px) {
    #h1.jawbone-takeover-minimulti .jawbone-hero-image {
    background-image:url(../images/hero-2000.jpg)
}

via：http://www.w2bc.com/Article/40891