首页 > 代码库 > 设置全屏的背景图片
设置全屏的背景图片
我们有时期望背景图片自动拉伸占据所有空间，使用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="http://www.mamicode.com/back_main.png" >
</div>
<div>
Your content goes here!
</div>
</body>
</html>
设置全屏的背景图片