Question

我尝试使用css文件中的以下内容设置整页背景图片

html { 
    background: url(images/background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

虽然看起来确实很好，但它只出现在主体中出现的任何东西下方（例如页脚）

任何帮助将不胜感激此致，loaannis

Answer 1

也许你没有设置你的div：在这里，我有一个示例代码，包括“main-content”div和“body”标签内的“footer”div：

HTML：

<body>
    <div id="main-content">
        <p>1234 testing 1234</p>
        <p>main content goes here</p>
        <p>4321 testing 4321</p>
    </div>
    <div id="footer">
        <p>Contact information here</p>
    </div>

</body>

这是带有额外线条的CSS，用于确定页脚颜色（为了更好的可见性）：

body { 
background: url("http://www.neyralaw.com/wp-content/uploads/2012/07/tokyo-blue-background-4547.jpg") no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#main-content {color:yellow;}
#footer {position:absolute; bottom:0; color:white;}

请注意，为了获得更好的可见性，我已将您的本地图片网址替换为我在互联网上找到的图片。当然，任何图像网址都会正确显示。我也用css中的“body”替换了“html”。由于“身体”实际上是“显示”的，我不明白为什么你应该设置“html”的样式。但是，即使在CSS中用html替换了body，它仍然可以正常工作！

在这里演示：http://jsfiddle.net/Ee74C/4/

快乐编码，

Thodoris

CSS3整页背景图像显示在身体下方

1 个答案: