CSS实例分析:完美的全页面背景图片

我们之前已经知道了可调整大小的背景图片的概念。但是读者Doug Shults发给了我一个链接，其中使用了非常酷的技术，我觉得这种技术要比之前的任何技术都要好。

上图所展示的背景图片以及所应用的这种技术来源于这个网站。

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

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

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

技术1

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

<div id="bg">
    <div>
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <img src="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

还是像往常一样，非常感谢Doug Neiner提供了这种方法。

这里，我们可以不用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;
}

查看示例

原文：Perfect full page background image