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.
Helpful Links
Related Posts
Author Bio
My name is Soh Tanaka and I am a Los Angeles based designer/front-end developer specializing in CSS driven web design with an emphasis on usability and search engine optimization. I also run a CSS Gallery which is updated daily with the best CSS websites from around the world. Come check it out!
You can learn more about me or 
Follow me on twitter for more updates and resources!
Did You Enjoy This Post?
Subscribe via RSS or by email to get all upcoming tutorials and articles delivered straight to you.
+ Add Comment37 Peeps Have Spoken Their Minds...
Thank you for this tip, but is that working if you do not have any fixed heigth in your container?
Check out this demo: http://www.sohtanaka.com/web-design/examples/fixed-footer-bg/index3.htm
I took off the height on the container :-)
Ok, so, that works! Nice job :)
fixed background image works for all browsers as far as i know, ie6, ie7, ie8, firefox, opera, safari supports fixed background image. i think Soh defined the fixed height for showing the scroll effect over the fixed background.
Thanks for the tip. I’ve been using Ryan Fait’s push method which is great, but gives me trouble in some layouts. Add one to the toolbox.
Nice tutorial. Very easy for people who are not too familiar with CSS standards. Keep it up.
Hey John, would you mind adding a link to Ryan’s method? I’m interested in how others have achieved this effect~ Thanks!
Great work!
Really cool, thanks.
Intresting, a website about hand coding but uses the wordpress system.
Interesting, Bob has a website that is claiming expert web2.0 but has no clue that WordPress allows you to create custom themes from scratch?
Thank you, this was a short and easy to understand tut.
@Soh Here is the Ryan Faits push method. -This is a Google Cache, Ryan’s website is not longer available-
Link: http://tinyurl.com/ryanfaits
@Soh sorry for the re-post but here is another method
http://www.cssstickyfooter.com/using-sticky-footer-code.html
-cheers
Thanks Ivor!! :-)
Awesome tutorial, and seriously straight forward. Thanks for the tips. Also, I’m loving the site design. :)
gre8 site design…!
Nice job Soh. I’m guessing putting a min-height of 100% on the white wrapper would work too? Haven’t tested it, but I’m assuming it will. That’s the only other layout I’d see a use for.
@Ivor, @Soh, Ryan Faits CSS sticky Footer is available here: http://ryanfait.com/sticky-footer/
I am finishing up on a site that has similar footers plus browsers corners. You can see the effect best on a big monitor. Don’t try to look at it in IE6 because I have not even started to try and make it work there. There is still a lot of work left to do but take a look at http://www.prestopartyz.com
Hi guys,
Why not to put your footer outside of containter div and set the width to 100% and place the bg image? then you have got your footer defined and plenty of free foom to set up different bg images for body and html….
why ppl dont use this technique??
Very nice, thankyou for sharing this :)
awesome and simple, just what i needed!!!!
Perfect, thank you.
Whooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
I really like to design and footer. Can you give the psd or images to me?
I fail to see the point of this, except for simply having a body-bottom aligned background image. Body bottom is not footer. Content overlaps this image if height of it is greater than browser height. Footer, and therefore it’s background, should come after the content.
So there are no similarities between technique displayed here and other “sticky-footer” techniques.
I guess better suited title for this is “Fixed Body Backgrounds with CSS”
Kudos for effort, though :)
Thanks for the Kudos. It made me feel warm and fuzzy about the title of this tutorial.
Thanks.handy
Hi, interesting script you have here. But I think the purpose of a fixed footer background is to go with some content. When you make a div (fixed footer), all you have to do is this:
EXAMPLE: FOOTER CONTENT.
Saves effort, time and scriptlength :)
It’s really help me….nice post..!
Hi, your approach is the only one that worked for me AT ALL – so far. (Although it’s actually not a sticky footer but a sticky body-background D.)
However, is there any way of keeping the content above the footer image when the content is longer and one has to scroll down the page? As it is it’s only helpful if the content is extremely short.
Thanks in advance. Ruana.
very nice and simple. been looking for a good technique for a while. yes, there are several ways of doing this, so some can save the criticism. That’s that beautiful thing about web design – everyone has their own unique way. Thanks again.
THankx friend nice css trick … you solve my prblm …
THankx
Abdullah
finally a tut that works, and with minimal code. thanks a lot!
it’s easy to makeout…..
thank your very much for this tutorial ive spent hours trying to figure it out…and then i stumbled upon this tutorial…do you have any tutorials on how to make a feedback form like this one ???
ps…. ur website looks awesome….
Speak Your Mind...