fmz 14

I am working on a site that requires a sticky footer (so the footer hugs the bottom of the page regardless of how much content is on the page). I have worked this out quite well for most circumstances.

Then, in addition to the repeating background image which I attached to the body, I needed to add a larger non-repeating image to the background. This required an additional div that I named: body-outer. The only problem is that when I added this additional div, the footer no longer sticks as it should.

View the site here:

To see the problem grab the browser window by the resize handle and pull it up. The footer slides up and overrides all other content.

Here is the code I am using:

#body-outer              { background: url(../_images/bg_body.jpg) no-repeat center top; height: 100%; }
body                        { width: 100%; background: url(../_images/bg_html.jpg) repeat-x left top; }
#container                { width: 960px; margin: 0 auto; }
html, body, #container   { height: 100%; }
body > #container         { height: auto; min-height: 100%; }
#main                     { padding-bottom: 140px; }

If you remove the body-outer div the footer behaves normally as you can see here:

I would appreciate some help with this so I can keep the needed background image and have the footer ride the bottom as it should.


1 answer

This was chosen as the best answer

off the cuff, what about adding the extra background to the html element?

html              { background: url(../_images/bg_body.jpg) no-repeat center top; height: 100%; }
Answered over 6 years ago by Tony Crockford
  • Thanks for doing a little off the cuff. Worked perfectly. Thanks. fmz over 6 years ago