положить в нижний горизонтальный повторяющийся фон без разрушения макета

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