ZZ 自适应浏览器窗口的页面背景

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

CSS代码：

HTML结构代码：

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

点此查看demo

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

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

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

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

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

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

具体使用方法：
CSS代码：

HTML代码：

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

点此查看demo

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

点此查看demo
于是又对页面css进行修改：

添加了上面的代码之后，解决了上面的问题，当页面内容高度超过一个屏幕的高度的时候，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。

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

转自：冰剑’s blog