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

基于html5背景图片自适应代码的更多相关文章

  1. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  2. css代码添加背景图片常用代码

    css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; heigh ...

  3. 兼容各浏览器的css背景图片拉伸代码

    需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...

  4. bootstrop设置背景图片自适应屏幕

    如果不用bootstrop框架,想让背景图片自适应窗口大小,可以这样做: <style type="text/css"> html{height: %;} body.a ...

  5. CSS实现网页背景图片自适应全屏

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  6. CSS实现网页背景图片自适应全屏,自适应背景图片

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  7. netbeans中给jpanl添加背景图片制定代码的理解——匿名内部类继承父类

    此测试是为了仿照在netbeans中给jpanl添加背景图片的制定代码的执行过程 在JpDemo中定义了个Car类的数据类型,但在给其赋值对象时使用了匿名内部类,继承了Car类,是其子类,并重写了父类 ...

  8. 基于HTML5多图片Ajax上传可预览

    html5多图控件<input id="fileImage" type="file" size="30" name="fil ...

  9. css 背景图片自适应元素大小

    一.一种比较土的方法,<img>置于底层. 方法如下: CSS代码: HTML: <img src="背景图片路径" /> <span>字在背景 ...

随机推荐

  1. C# 多种方式发送邮件(附帮助类)

    因项目业务需要,需要做一个发送邮件功能,查了下资料,整了整,汇总如下,亲测可用- QQ邮箱发送邮件 #region 发送邮箱 try { MailMessage mail = new MailMess ...

  2. 操作MySQL数据库

    向表中插入数据 insert 语句可以用来将一行或多行数据插到数据库表中, 使用的一般形式如下: insert [into] 表名 [(列名1, 列名2, 列名3, ...)] values (值1, ...

  3. centos6.4搭建lnmp服务(转载)

    1.配置防火墙,开启80端口.3306端口vi /etc/sysconfig/iptables-A INPUT -m state --state NEW -m tcp -p tcp --dport 8 ...

  4. java验证码Captcha

    import java.awt.Color; import java.io.IOException; import java.util.Random; import javax.servlet.htt ...

  5. 用 rsync 同步本地和服务器的文件

    参考 DigitalOcean 安装 For Debian/Ubuntu: sudo apt-get install rsync For OpenSUSE/Fedora: sudo yum insta ...

  6. poj2449 Remmarguts&#39; Date【A*算法】

    转载请注明出处,谢谢:http://www.cnblogs.com/KirisameMarisa/p/4303855.html   ---by 墨染之樱花 [题目链接]:http://poj.org/ ...

  7. 纯css实现苹果表盘动画

    欢迎訪问我们的博客:http://www.w3ctrain.com/2015/07/06/Apple-Watch-Dials/ 随着苹果表的大量生产,我想.用CSS来实现拨号动画的时候到了. 在这篇文 ...

  8. Pyscripter是python下一个非常流行的开源IDE

    Pyscripter 不能正确调用另一文件中模块的问题的解析(Internal Engine 和 Remote Engine) 背景 Pyscripter是python下一个非常流行的开源IDE,笔者 ...

  9. 各类聚类(clustering)算法初探

    1. 聚类简介 0x1:聚类是什么? 聚类是一种运用广泛的探索性数据分析技术,人们对数据产生的第一直觉往往是通过对数据进行有意义的分组.很自然,首先要弄清楚聚类是什么? 直观上讲,聚类是将对象进行分组 ...

  10. Java-Servlet--《12-WEB应用中的普通Java程序如何读取资源文件.mp4》 有疑问

    \第五天-servlet开发和ServletConfig与ServletContext对象\12-WEB应用中的普通Java程序如何读取资源文件.mp4; 多层时,DAO为了得到资源文件中的配置参数: ...