7月
14
2011

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

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

CSS代码:

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

HTML结构代码:

01 <div id=“wrap”>
02     <div class=“container”>
03         <div id=“header”>
04             这里是header
05         </div>
06         <div id=“content”>
07             这里是Main content
08         </div>
09         <div id=“footer”>
10             这里是footer
11         </div>
12     </div>
13 </div> 
14 <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就变成了这样:

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

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

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

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

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

具体使用方法:
CSS代码:

01 html {height:100%;}
02 body {/*为页面body添加一些基本信息*/
03     font-family:Arial, Helvetica, sans-serif;
04     font-size:14px;
05     height:100%;
06 line-height:1.5;
07     color:#FFFFFF;
08 #background {
09 position: fixed;
10 top: 0;
11 left: 0;
12 overflow: hidden;
13 width: 100%;
14 height: auto;
15 z-index: -1;
16 overflow: hidden;
17 }
18 #wrap{position:absolute;width:100%;height:100%;top:0; left:0; z-index:2;}
19 .container{width:960px;margin:0 auto;}

HTML代码:

01 <div id=“wrap”>
02     <div class=“container”>
03         <div id=“header”>
04             这里是header
05         </div>
06         <div id=“content”>
07             这里是Main content
08         </div>
09         <div id=“footer”>
10             这里是footer
11         </div>
12     </div>
13 </div> 
14 <img src=“bg.jpg” id=“background” alt=“” />

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

点此查看demo

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

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

1 html {height:100%;_overflow:hidden;}增加overflow:hidden;
2 #wrap{position:absolute;width:100%;height:100%;top:0;left:0;_overflow:auto;_overflowx: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。

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

转自:冰剑’s blog

关于作者:moface

博主

留下评论

博客剩余工作

6,优化前台(YSlow) 2,404页面 3,IE6下兼容性问题很大 1,标签小工具行高有点儿问题 4,微博聚合 5,推广工作 7,CDN(cloudflare

分类

访问统计