css背景图根据屏幕大小自动缩放

简介:

css背景图根据屏幕大小自动缩放

133923120.png

代码:

1
2
3
4
5
6
7
8
9
10
< style >
html,body{margin:0px;padding:0px;}
#background { position: fixed;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;background-color: #211f1f; display:none\8;}
#background .bg-photo {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: none;overflow: hidden;-webkit-background-size: cover !important;-moz-background-size: cover !important;-o-background-size: cover !important;background-size: cover !important;}
#background .bg-photo-1 {  url(1.jpg ) no-repeat center center;}
#background-ie { position: fixed;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;background-color: #211f1f;}
</ style >
< div  id = "background" >
     < div  class = "bg-photo bg-photo-1"  style = "display: block;" ></ div >
</ div >


演示样例:http://t.163.com/session





      本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/xuqin/1256133,如需转载请自行联系原作者





相关文章
|
3月前
|
Web App开发 前端开发 安全
CSS背景图和HTML的<img>标签怎么选?
CSS背景图和HTML的<img>标签怎么选?
|
7月前
|
前端开发
|
8月前
|
前端开发
通过构建背景图学习CSS径向渐变
通过构建背景图学习CSS径向渐变
36 0
|
前端开发 JavaScript Windows
js实现body背景图自动扩缩 光靠css几乎无法实现这样的效果
js实现body背景图自动扩缩 光靠css几乎无法实现这样的效果
153 0
js实现body背景图自动扩缩 光靠css几乎无法实现这样的效果
|
前端开发
「CSS畅想」我的发呆专属,反复解锁手机屏幕
前端玩转CSS,可以创造出不少有趣的效果。今天实现了一个解锁手机屏幕的效果,简单的快乐。
132 1
html+css实战170-css精灵-背景图的缩放
html+css实战170-css精灵-背景图的缩放
91 0
html+css实战170-css精灵-背景图的缩放
html+css实战73-背景-背景图
html+css实战73-背景-背景图
78 0
html+css实战73-背景-背景图
|
前端开发 JavaScript
💖CSS + JS 送学妹满屏幕小爱心
💖CSS + JS 送学妹满屏幕小爱心
121 0
|
Web App开发 编解码 前端开发
第119天:移动端:CSS像素、屏幕像素和视口的关系
移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间的关系。
1234 0