100%背景图片

先看看效果演示（改变浏览器窗口大小，背景图象会自动伸缩）

代码解析

主要的HTML代码

<div>
<img id="background" src="rabbit.jpg" alt="" title="" />
</div>
<div id="fixed">
<p>The background image is always 100% x 100% (body size). But it only works with a 100% x 100% html/body.</p>

</div>
<div id="scroller">
<div id="content">
文档内容.....
</div>
</div>

由上面的代码可以了解到，图片，左上的小块文字，主要文档内容是三个DIV分布，是主要的三个框架。
接下来看看相关的CSS代码

html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
/*html和body标签的全局样式设定,无内外间距,全100%长宽,溢出时自动伸长来隐藏内部滚动条*/

body {font-family:verdana, arial, sans-serif; font-size:76%;}
/*设置全局的字体以及其大小*/

#background{position:absolute; z-index:1; width:100%; height:100%;}
/*放置图片的DIV为绝对定位,Z坐标为1,自动长宽*/

#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
/*主内容的外框,也是全100%长宽,定位占全屏幕,Z坐标比图片DIV高一层，所以是在图片的上方,并当DIV内容超过范围时显示滚动条*/

#content {padding:5px 300px 20px 200px;}
p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
/*设置内容的样式，有左右的内补丁可保证不会出现左右的滚动条*/

#fixed {position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000; padding:10px;}
/*左上小块的DIV设置，Z坐标为10

转载于:https://www.cnblogs.com/replace/archive/2006/04/12/372778.html