在网站顶部和底部分开背景图片？

Question

我想在我的网站的顶部和底部有单独的背景图像，但似乎无法确定它。我希望图像保持在页面的绝对顶部和底部。下面是网站样机的镜头，以及自己的尺寸背景镜头。

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

找到我在编码时失败的尝试

样机 img683 [点] ImageShack的[点]我们/ img683 / 4502 /莫基[点] JPG

背景 img233 [点] ImageShack的[点]我们/ img233 /九千四百二十一万○四百五十四分之一千二百九十三[点] JPG

注意：背景为1200x400。

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

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

Answer 1

你可以做的另一件事是在身体和html上设置背景图片。

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

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

您可以看到jqueryui.com作为示例。

Answer 2

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

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

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

Answer 3

你能做什么：

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

Answer 4

这听起来像你想要的：

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

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

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