Fixed Footer Backgrounds with CSS
Blog » CSS/XHTML » Fixed Footer Backgrounds with CSSFixed Footer Backgrounds with CSS
January 15th, 2009
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
Similar Posts:
Subscribe via RSS ,by email, or by twitter to get all upcoming
tutorials and articles delivered straight to you.
Bookmark or Share this Post!
Tags: CSS Backgrounds
This entry was posted on Thursday, January 15th, 2009 at 12:15 am and is filed under CSS/XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Popular Posts
Recent Comments
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.