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

作者为 moface Comments

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

CSS代码：

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;}

HTML结构代码：

<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

具体使用方法：
CSS代码：

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;}

HTML代码：

<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
于是又对页面css进行修改：

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;}