14
2011
ZZ 自适应浏览器窗口的页面背景
最近在做的一个项目中,客户要求网页的背景不管客户浏览器大小多大, 背景都要铺满全屏。在网上找了一下,有人已经研究出来了方法,不用js就可以做到。下面看代码:
CSS代码:
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;overflow–x: hidden; z-index:2;}
09 #background {position:absolute; z-index:-1; width:100%; height:100%;}
10 .container{width:960px;margin:0 auto;}
HTML结构代码:
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的背景色和背景图(如果有),又使内容区域的最上面。
这样看起来没啥问题了,挺好。
但是,但是客户的要求是千变万化的,客户说:如果我的img的src地址出错了,怎么办,这样把,我再在body里面增加一个bg吧。然后css就变成了这样:
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 }
但是,但是客户看了之后说:这个背景图要随着内容变化,也变化,不能让它固定在浏览器窗口上面。于是,再搜索信息,再修改:
在网上找到了一个外国佬写的一个Jquery插件Full Size Background Image jQuery Plugin
他做的一个demo: Full Size Background Image jQuery Plugin DEMO
具体使用方法:
CSS代码:
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代码:
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和其它浏览器里浏览:
并且当添加的图片背景不存在的时候,ie6浏览器页面底部会出现一大块空白,查看下面没有背景的demo, 请分别在ie6和其它浏览器里浏览:
点此查看demo
于是又对页面css进行修改:
2 #wrap{position:absolute;width:100%;height:100%;top:0;left:0;_overflow:auto;_overflow–x:hidden; z-index:2;}
添加了上面的代码之后,解决了上面的问题,当页面内容高度超过一个屏幕的高度的时候,ie6下面不会再出现问题,请看demo:
但是由于在ie6下面这是用wrap模拟的滚动条,所以在ie6页面下,当#background标签没有图片的时候,body背景图会固定在窗口里不变。请看demo:
总结:
文章前两个demo没有用js,纯css写的,唯一不足之处就是:当页面#background没有图片的时候,拉动右边滚动条,body的背景是不变的。
文章后面四个demo用了js,不足之处就是:ie6浏览器会出现一些问题,当然如果不考虑ie6的话,就可以这里的4个demo中的任意一个了。
其实这里我们考虑的body的背景问题,如果不考虑body的背景问题的话,我们完全可以用纯css的那个demo。
如果你有什么好的意见和建议,欢迎在下面的评论处与我交流。
转自:冰剑’s blog