以下是这种技术所要达到的效果：

• 使用图片填充整个页面，没有空白
• 根据需要依比例显示图片
• 保持图片比例
• 图片居中于页面
• 不会有滚动条
• 跨浏览器的兼容性
• 不是某种华丽的伎俩例如Flash

这是非常高的要求，我们将使用各种技术来达到这样的效果。首先，由于图片要依比例缩放，传统的background-image属性已经不能够达到这样的效果了，使得我们只能使用行内图片。

技术1

这个行内图片将会被放置于一系列的封装元素之中，每一个封装元素都是我们为了达成目标所必不可少的。

<div id="bg"><div><table cellspacing="0" cellpadding="0"><tr><td><img src="data:images/bg.jpg" alt=""/></td></tr></table></div>
</div>

CSS代码是：

* {margin: 0;padding: 0;
}
html, body, #bg, #bg table, #bg td {height:100%;width:100%;overflow:hidden;
}
#bg {position: fixed;
}
#bg div {height:200%;left:-50%;position:absolute;top:-50%;width:200%;
}
#bg td {text-align:center;vertical-align:middle;
}
#bg img {margin:0 auto;min-height:50%;min-width:50%;
}

标记语言和CSS确实有些繁琐，但是效果却很好！做完这些已经可以完成工作了，但是如果我们希望页面上有真实的内容会怎样呢？将html和body元素的overflow属性设置为hidden是会让你对这一点有些担心的，因为在一个没有滚动条的网站上，那样会完全切除超出区域范围的内容。为了让可滚动的内容正确显示，我们将要介绍另外一个封装元素。它会位于背景的前面，宽度和高度是完全展开的浏览器的大小，而且将overflow属性设置回auto（可滚动）。然后我们就可以安全的将内容放入这个封装元素之中了。

<div id="cont"><div class="box"><!-- content in here --></div>
</div>

#cont {position:absolute;top:0;left:0;z-index:70;overflow:auto;
}
.box {margin: 0 auto;width: 400px;padding: 50px;background: white;padding-bottom:100px;font: 14px/2.2 Georgia, Serif;
}

目前存在的Bug

在Safar4和Chrome中，min-height属性不起作用，不能够垂直适应大小。

技术2

这里，我们可以不用JavaScript修复，只用CSS就能做到这一点。图片还是一个行内图片，class名称为"bg"，没有额外的标记语言。这一点会让所有不喜欢额外标记的人满意的。

只有一点需要说明的是，这种方法并不能在任何布局下有效，在IE7中它不能居中，在IE6中完全不起作用，而且取决于原始图片的大小，可能不能总是按照比例显示。但是，由于这种方法很简单，而且没有bug，绝对是可供参考的。下面是CSS：

img.bg {/* Set rules to fill background */min-height: 100%;min-width: 1024px;/* Set up proportionate scaling */width: 100%;height: auto;/* Set up positioning */position: fixed;top: 0;left: 0;
}
@media screen and (max-width: 1024px){img.bg {left: 50%;margin-left: -512px; }
}
div#content {/* This is the only important rule *//* We need our content to show up on top of the background */position: relative; /* These have no effect on the functionality */width: 500px;margin: 0 auto;background: #fff;padding: 20px;font-family: helvetica, arial, sans-serif;font-size: 10pt;line-height: 16pt;-moz-box-shadow: #000 4px 4px 10px;-webkit-box-shadow: #000 4px 4px 10px;
}
body {/* These rules have no effect on the functionality *//* They are for styling only */margin: 0;padding: 20px 0 0 0;
}