Fixed Footer Backgrounds with CSS

 

Tags: Beginner

I’ve gotten a couple of emails asking me how to pull off this effect so I thought it may be helpful for others as well. When fixing a background image on the bottom of your page, the following technique seemed to be the easiest from my experience.

HTML

<div class="headwrap">
 <!--Content Goes Here-->
        <div class="container"></div>
 <!--End Content-->
</div>

CSS

We will first add the repeating footer image on our body tag and position it to the bottom as fixed.

body {
 margin: 0;
 padding: 0;
 background: #005094 url(footer_bg.jpg) fixed repeat-x left bottom;
 width: 100%;
 min-width:970px;/*--Fixes Background Bug--*/
}

Then we will add in our header background in a div.

.headwrap {
 background: url(body_bg.jpg) no-repeat center top;
 float: left;
 width: 100%;
}

Conclusion

I’m sure there are various ways of achieving this effect, if you have any other suggestions or have any questions please feel free to let me know.

View Demo

(Continue)..