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">
</div>

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)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
#wrapper {
min-height: 100%;
}

#main {
    overflow:auto;
    padding-bottom: 167px;
    z-index: 2;
    } 
#footer {
background-image:url('images/footer-back.png');
position: relative;
margin-top: -167px; /* negative value of footer height */
height: 167px;
clear:both;
z-index: 2;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
letter-spacing: .02em;
}

2 answers

Ktash 1851
1
point

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 about 6 years ago by Ktash
  • Um...the designer wants an 100% background image? redconservatory about 6 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 7 years ago
  • Updated my response with a real fix for your issue. Sorry about the mix up. Ktash almost 7 years ago
  • No problem, this is a great solution! redconservatory almost 6 years ago
0
points

This is a great answer, thanks!

Answered almost 6 years ago by redconservatory