css - 在不破坏布局的情况下放置底部水平重复背景

Question

几个小时后，从已经可用的类似布局开始，我几乎设法让这个网站正常运行。

但我现在唯一的问题是，如果不破坏 100% 高度，我无法在页面底部设置背景。

http://www.digiflipconcepts.com/zen-creations/

我想要的底部图片是这个:http://www.digiflipconcepts.com/zen-creations/images/page-bkg-bottom.jpg

有人能帮忙吗？

Answer 1

从容器中拉出页脚

<div id="container">
    …
</div>
<div id="footerContainer">
    <div id="footer">
        …
    </div>
</div>

添加了 CSS

div#footerContainer {
    position:relative; /* needed for centering */
    background:url(../images/page-bkg-bottom.jpg) repeat-x bottom;
}

div#footer {
    width:1120px;
    margin:0 auto;
    background:url(../images/footer.jpg) no-repeat bottom center;
    height:459px;
    margin-top:-400px;
}

我讨厌这个解决方案，你现在在两个地方指定了宽度。 CSS 什么时候推出变量？

---

我非常喜欢这个，但是如果把窗口变小，它就会搞砸。

body {
    background-image:url('images/page-bkg-top.jpg'), /* not sure if \n works */
                     url('images/page-bkg-bottom.jpg');
    background-repeat:repeat-x;
    background-position:top left, bottom left;
}