Search code examples
htmlcssbackground-imagesticky-footer

background repeat with html,body height to 100% with css sticky footer

Problem

I'm using this implementation of a CSS sticky footer. It does:

html,body{
    height:100%;
}

I use (would like to) use a repeating background, however, the height:100% causes this issue: enter image description here (image from another sticky footer question with unsatisfactory answers)

It's my understanding that the image gets sized to the size of the window at rendering, and thus never sizes past that.

Question

Is it possible to continue to use my existing choice of CSS sticky footer with a repeating background image rendered completely on long pages

OR

is there another option of CSS sticky footers which does support the repeating background?

For reference

<div id="wrap">
    <div id="header">Header text</div>
    <div id="main">

    </div>
</div>
<div id="footer">Footer Text</div>

CSS

* {margin:0;padding:0;} 
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
    padding-bottom: 180px;}  /* must be same height as the footer */
#footer {position: relative;
    margin-top: -180px; /* negative value of footer height */
    height: 180px;
    clear:both;}
Solution

  • Simply add additional wrapper. At least I always do exactly that. And attach bg-image to div#no-footer, it will stretch to the bottom

    html, body {
    height:100%;
}
#wrap {
    min-height:100%;
    background-image:url(...) top left repeat-x;
}
#no-footer-pad {
    padding-bottom:100px;
}
#footer {
    height:100px;
    margin-top:-100px;
}

    html markup:

    <html>
<head></head>
<body>
    <div id="wrap">
         <div id="no-footer-pad"></div>
    </div>
    <div id="footer"></div>
</body>

    So you have almost this markup, you must simply add additional div (#no-footer-pad), so that your content would not overlap footer