我们有时期望背景图片自动拉伸占据所有空间,使用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>