Sticky footer and body background image at the bottom of the page

Question

I have HTML5boilerplate and I want to make a template with sticky footer and image as background of body. The background should be always at the end of the page (if page is higher than clientHeight) or at the screen (if page is shorter).
My problem is when sticky footer works but background doesn't and vice versa.

Take a look, please.

This is my index.html:

<body>
    <div class="wrap">
        <header></header>
        <div class="main clearfix right-sidebar">
            <div class="content"></div>
            <div class="sidebar"></div>
        </div>
    </div> <!-- end of .wrap -->
    <footer></footer>
</body>

My CSS is:

/*html, body { min-height: 100%;}*/
html, body { height: 100%;}
body > .wrap {height: auto; min-height: 100%; margin: 0 auto;}
body > .wrap > .main { padding-bottom: 70px;} 
body > .wrap, body > footer {width: 950px; position: relative;}
body > footer { margin: -70px auto 0 auto ; height: 70px; clear:both; } 
</* end of centered sticky footer */
body { background: url(../img/bg.png) #fff 0% 100% repeat-x; }
.clearfix:before, .clearfix:after { content: " ";  display: table;}
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

When I define html, body { height: 100%;} everything is ok, if page is shorter than client's screen.

body height 100%, short page

When the page is higher than client's screen background-image is at the bottom of the screen - not the page. When user srcolls the page the image is in the middle of the screen.
This picture shows the problem (yellow background for your convience):

body height 100%, high page

And when when I define html, body { min-height: 100%;} everything is ok on high pages, but sticky footer doesn't work on shorter ones:

body min-height 100%, short page

I'd like to add that I don't want to fixed background. It should be at the of the screen or page.

score 0 · Answer 1 · answered Feb 26 '13 at 10:52

0

You could use jQuery to set the body min-height to the screen size and offset it from the footer height

$('document').resize(function(){

  var windowHeight = $('window').height() - $('footer').height();

  $('.wrap').css('min-height', windowHeight );

});

answered Feb 26 '13 at 10:52

Luke Robertson

1,592
16
21

Of course, I could, but I don't want to. I still believe I can do it with CSS only. Anyway thank you for your reply. – bernard Feb 26 '13 at 11:19

score 0 · Answer 2 · answered Feb 26 '13 at 11:24

0

You can try Sticky footer without js from this tutorial: http://ryanfait.com/sticky-footer/

answered Feb 26 '13 at 11:24

sugresmax

1
2

It doesn't work as well. See the example: You can add content or change window size to see: [http://jsbin.com/umavoj/2/watch](http://jsbin.com/umavoj/2/watch) – bernard Feb 26 '13 at 12:39
I don't like `z-index` solutions. Your idea requires 1 additional tag. IMHO it's better to do it this way: [http://jsbin.com/umavoj/5/watch](http://jsbin.com/umavoj/5/watch) It has 1 additional parent `div.bg`. The only 1 inconvenience is `div.bg` has to be transparent if you want to display body background image (for instance at the top of the page). However I'm still searching an idea how to do it without any additional html elements. Regards! – bernard Feb 26 '13 at 21:58

score 0 · Answer 3 · answered Jul 17 '13 at 08:19

I myself solved the issue with the body solution since I couldn't find anything else. I set my background image to the body and it got behind the footer as well. There is no other solution I could come up with , since you're actually placing a div outside the page-wrapper:

body{
    width:100%;
    background: url(../images/lines.png);
    background-repeat: repeat-y;
    background-position: center center;
}

Sticky footer and body background image at the bottom of the page

3 Answers3