码迷,mamicode.com
首页 > 其他好文 > 详细

设置全屏的背景图片

时间:2014-12-02 12:10:35      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   os   使用   sp   on   

我们有时期望背景图片自动拉伸占据所有空间,使用CSS 3做起来并不麻烦,定义如下的CSS:

body {
    background:#3d71b8 url(../back_main.png);
    background-size: 100%;
    background-position:center;
}

但是background-siz是CSS 3的属性,并不是所有的浏览器都支持。使用CSS 2的一种实现如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Welcome to my blog</title>
    <style type="text/css">
    #bg {
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }

    #bg img {
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        width:100%;
        height:100%;
        z-index:-1;
    }
    </style>
</head>
<body>
    <div id="bg">
        <img src="back_main.png" >
    </div>
    <div>
    Your content goes here!
    </div>
</body>
</html>

设置全屏的背景图片

标签:style   blog   http   io   ar   os   使用   sp   on   

原文地址:http://my.oschina.net/winru/blog/351295

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