Fixed Footer Backgrounds with CSS

Fixed Footer Backgrounds with CSS

Fixed Footer Backgrounds with CSS

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>
	<!--Content Goes Here-->
        <div></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.

 

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>