I have a sticky foot that was working until I added in a 100% width background image, and now the footer does not stick to the bottom.

Here is my background imge HTML:

<div id="background-wrap">
        <img alt="" src="folder/LH-fullscreen-bkg.jpg">

and my css:

div#background-wrap img {
    position: absolute;
    z-index: -1;
    /*max-height: 100%;*/
    /*min-height: 60em;*/
    width: 100%;
    /*height: 100%;*/

I am using the sticky footer solution by Steve Hatcher:

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
#wrapper {
min-height: 100%;

#main {
    padding-bottom: 167px;
    z-index: 2;
#footer {
position: relative;
margin-top: -167px; /* negative value of footer height */
height: 167px;
z-index: 2;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
letter-spacing: .02em;

2 answers

Ktash 1851

Wrap the entire page in a div with an id of wholewrap (used below) and use the following css

#wholewrap {
    width: 100%;
    position: relative;
#background-wrap {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    overflow: auto;

That should fix it. If you're supporting all the way down to IE 6, you'll want to apply the fix in a conditional comment or something:

#background-wrap {
    height: expression(document.body.clientHeight);
    width: expression(document.body.clientWidth);

The technique used here is derived from this article and a little elbow grease. There are probably other solutions, but this is the only pure CSS solution I've come up with.

Answered almost 9 years ago by Ktash
  • Um...the designer wants an 100% background image? redconservatory almost 9 years ago
  • Whoops, that's my bad. Went investigating and forgot about that in the title... Hmm, let me do a bit more digging on this Ktash almost 9 years ago
  • Updated my response with a real fix for your issue. Sorry about the mix up. Ktash almost 9 years ago
  • No problem, this is a great solution! redconservatory over 8 years ago

This is a great answer, thanks!

Answered over 8 years ago by redconservatory