网站顶部和底部的单独背景图片？答案

【问题标题】：Separate background images at top and bottom of site?网站顶部和底部的单独背景图片？
【发布时间】：2011-01-20 11:55:46
【问题描述】：

我想在我的网站的顶部和底部有单独的背景图片，但似乎不太确定。我希望图像保持在页面的绝对顶部和底部。下面是网站模型的照片，以及带有尺寸的背景照片。

样机没有显示，但底部会有文字链接和版权信息。你可以在 www[dot]dev[dot]arbitersoflight[dot]net

找到我失败的编码尝试

样机 img683[dot]imageshack[dot]us/img683/4502/mocky[dot]jpg

背景 img233[dot]imageshack[dot]us/img233/1293/94210454[dot]jpg

注意：每个背景都是 1200x400。

编辑：在这一点上，我可以毫无疑问地显示这两个图像，问题是让底部图像粘在浏览器窗口的绝对底部。似乎它目前处于固定位置。下面是我的 CSS 和 HTML..

更新（已解决）：我终于通过根据本指南修改我的代码解决了这个问题：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ 感谢大家的所有建议。

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用第二张图片作为主体背景，也可以设置颜色，并将第一张图片作为容器的背景。反之亦然，但请记住对齐背景，如果切换，请注意容器的高度。

body 和 html 背景（如 zzzzBov 和 nemophrost 的建议）在我的 Firefox 中不起作用...

body {
    background: #DDD url('2.png') no-repeat center bottom;
}
.container {
    background: url('1.png') no-repeat center top;
}

【讨论】：

【解决方案2】：

您可以做的另一件事是在正文和 html 上设置背景图像。

body {
    background: url(...);
}

html {
    background: url(...);
}

您可以查看jqueryui.com 获取此示例。

【讨论】：

【解决方案3】：

你可以做什么：

菜单是一个具有自己背景的 div，以适应上部区域。然后将底部的背景应用到您正在使用的正文或内容/页面容器。

【讨论】：

【解决方案4】：

听起来像你想要的：

html
{
  background: url(...) no-repeat top; /* see the background-position property */
}

body
{
  background: url(...) no-repeat bottom;
}

您可能想要切换一个或两个以使用repeat-x，并确保设置合适的背景颜色以匹配图像上的颜色。

【讨论】：

我试过这个，但它仍然在（看起来是）固定位置显示底部背景。我试图让它坚持到底。span>
听起来好像正文没有扩展以包含内容。您没有在某处明确设置 html 或 body 高度吗？
@Ferret 在我的机器上看起来不错。底部图像在页脚文本后面居中，尽管 layout.css 为什么有html, body {height: 100%;}？