冰剑'blog

最近在做的一个项目中，客户要求网页的背景不管客户浏览器大小多大， 背景都要铺满全屏。在网上找了一下，有人已经研究出来了方法，不用js就可以做到。下面看代码：

html, body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;}
body {/*为页面body添加一些基本信息*/
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#FFFFFF;
	background:#DDDAD9;
}
#wrap{position:absolute;width:100%; height:100%;top:0; left:0; overflow:auto;overflow-x: hidden; z-index:2;}
#background {position:absolute; z-index:-1; width:100%; height:100%;}
.container{width:960px;margin:0 auto;}

<div id="wrap">
	<div class="container">
		<div id="header">
			这里是header
		</div>
		<div id="content">
			这里是Main content
		</div>
		<div id="footer">
			这里是footer
		</div>
	</div>
</div> 
<img src="bg.jpg" id="background" alt="" />
 

解释一下上面的css和html，这个其实就是将html和body的滚动条取消，用div#wrap容器来模拟页面的滚动条。其实并不是用图片做背景的，是将background的图片z-index设置为-1；使它放在wrap页面的底部，这样既覆盖了body的背景色和背景图（如果有），又使内容区域的最上面。

点此查看demo

这样看起来没啥问题了，挺好。

但是，但是客户的要求是千变万化的，客户说：如果我的img的src地址出错了，怎么办，这样把，我再在body里面增加一个bg吧。然后css就变成了这样：

	body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#FFFFFF;
	background:#DDDAD9 url(images/bg.png) no-repeat center top;
}

点此查看#background没有背景的demo

但是，但是客户看了之后说：这个背景图要随着内容变化，也变化，不能让它固定在浏览器窗口上面。于是，再搜索信息，再修改：

在网上找到了一个外国佬写的一个Jquery插件Full Size Background Image jQuery Plugin

他做的一个demo： Full Size Background Image jQuery Plugin DEMO

html {height:100%;}
body {/*为页面body添加一些基本信息*/
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	height:100%;
line-height:1.5;
	color:#FFFFFF;
#background {
position: fixed;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
height: auto;
z-index: -1;
overflow: hidden;
}
#wrap{position:absolute;width:100%;height:100%;top:0; left:0; z-index:2;}
.container{width:960px;margin:0 auto;}

<div id="wrap">
	<div class="container">
		<div id="header">
			这里是header
		</div>
		<div id="content">
			这里是Main content
		</div>
		<div id="footer">
			这里是footer
		</div>
	</div>
</div> 
<img src="bg.jpg" id="background" alt="" />
 

但是他这个插件有一个问题，当页面内容高度超过一个屏幕的高度，在ie6浏览器下会出现问题，背景图片只出现在了当前页面的当前窗口，当拉动页面右边的滚动条的时候，下面就没有背景了。请分别在ie6和其它浏览器里浏览：

点此查看demo

并且当添加的图片背景不存在的时候，ie6浏览器页面底部会出现一大块空白，查看下面没有背景的demo, 请分别在ie6和其它浏览器里浏览：

点此查看demo

html {height:100%;_overflow:hidden;}增加overflow:hidden;
#wrap{position:absolute;width:100%;height:100%;top:0;left:0;_overflow:auto;_overflow-x:hidden; z-index:2;}

添加了上面的代码之后，解决了上面的问题，当页面内容高度超过一个屏幕的高度的时候，ie6下面不会再出现问题，请看demo：

点此查看demo

但是由于在ie6下面这是用wrap模拟的滚动条，所以在ie6页面下，当#background标签没有图片的时候，body背景图会固定在窗口里不变。请看demo：

点此查看demo

总结：

文章前两个demo没有用js，纯css写的，唯一不足之处就是：当页面#background没有图片的时候，拉动右边滚动条，body的背景是不变的。

文章后面四个demo用了js，不足之处就是：ie6浏览器会出现一些问题，当然如果不考虑ie6的话，就可以这里的4个demo中的任意一个了。

其实这里我们考虑的body的背景问题，如果不考虑body的背景问题的话，我们完全可以用纯css的那个demo。

如果你有什么好的意见和建议，欢迎在下面的评论处与我交流。