码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-05-28 16:01:50      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:

基于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

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

标签:

原文地址:http://www.cnblogs.com/liaohuolin/p/4535913.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!