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;
}

放入底部水平重复背景而不破坏布局

1 个答案: