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

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

Kania answered 23/7, 2012 at 5:21 Comment(0)

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

Mcnully answered 23/7, 2012 at 5:30 Comment(0)

Hey now used to position fixed for this sticky footer as like this

.footer{
position:fixed;
bottom:0;
left:0;
right:0;
height:xxxx;
}

Pita answered 23/7, 2012 at 5:26 Comment(1)

This provides for a nice fixed footer, but I'd like my fixed to the bottom and not scrolling with the screen. Cheers. – Kania 23/7, 2012 at 5:32

Problem

Question

For reference

Recommended topics

Hot tags