基于html5背景图片自适应代码

时间:2022-12-06 12:18:33

基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片。效果图如下:

基于html5背景图片自适应代码

在线预览   源码下载

实现的代码。

css代码:

.jawbone-hero .jawbone-hero-image {
position:absolute;
background:transparent none no-repeat scroll 50% 0;
background-size:cover;
top:;
bottom:;
left:;
right:;
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