put in bottom horizontal repeating background without ruining layout

Question

Hi, after many hours and starting from similar layout that already worked I have almost managed to get this site working.

My only issue now though is that I can't get a background at the bottom of the page to work without ruining the 100% height.

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

The image I want at the bottom is this one: http://www.digiflipconcepts.com/zen-creations/images/page-bkg-bottom.jpg

Can anyone help?

Answer 1

Pulled footer out of container

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

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

I hate this solution, you've now got the width specified in two places. When is CSS coming up with variables?

---

I quite like this one, but it screws up if one makes the window smaller.

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