So, you just created this awesome fancy background for a website. The top part of the background is large and in charge, while everything below it is going to be a repeating background that goes all the way down to the bottom of the page and helps define your website’s borders. The goal is to make sure the top background sits on top of the repeating background so that you cannot see the repeating background until the top one is done, but how do you utilize 2 centered background images without the browser creating a horizontal scrollbar?
For an example of what we’re creating, click here.
You could just use a transparent PNG background that repeats over top of the large background using DD Belated PNG, but that would be much more load intensive than we want to shoot for. This can actually be done very easily with CSS. The two images that we will be using can be found here (top) and here (vertical repeating). I originally had a little bit larger image, but I shortened it for this demonstration so that you could view the effect.
First of all, the structure of the HTML is simple. All we need is our body tag, and then another div that will contain the rest of the website inside of it. In my example I’ve given it the id #background. Annnnnnd without further a-do, here is the CSS:
body {
background:#fff url(background.jpg) repeat-y top center;
margin:0px;
padding:0px;
}
#background {
background:url(background-top.jpg) no-repeat top center;
height:395px;
width:100%;
display:table;
}
We give the body element the repeating background so that it is in the back and it extends the full length of the page. Next, be sure to give the #background div height equal to the height of the image. The key is the 100% width and the display:table property. This ensures that you won’t get any scroll-bars because the background extends much further than the content of your page will, and because the div is displaying like a table, it will increase its height to whatever content is inside it so there is no need for a min-height hack. This checks out fine in all browsers, IE6 and up.
Joren Rapini you’re my hero.
Thanks for the temp page feedback by the way. It was helpful, ass. lol.
@Tom, hahah I forgot there for a minute what you were talking about. No problem.
I don’t even remember what I wrote, but I’m sure it was very enlightening.
Yeah, but why should i use an extra div when i can use html and body tags for styling?
LOVE IT - was just needing something like this, thanks!
Staicu is right, I didn’t even realize that you could add background styles to the HTML tag. Thanks! It kind of defeats the whole trick of this technique, but hey I’m glad I posted it - I learned something too! Just using this CSS accomplishes the same effect with less coding and it still validates (and works fine in IE6 too).
html {
background:#fff url(background.jpg) repeat-y top center;
}
body {
background:url(background-top.jpg) no-repeat top center;
height:395px;
margin:0px;
padding:0px;
}
This is amazing, just earlier today I was wondering the best way to go about this, thanks so much for sharing!
wow learn something new everyday! thanks for the tips everyone
Glad it helped. . . with Staicu’s input, now you can make a TRIPLE background haha. Not sure where that would come in handy though
Sweet! Just what I wanted.
Thank you.
“… now you can make a TRIPLE background haha. Not sure where that would come in handy though”
just think of the footer!
This is great! It worked a charm!
But… why does the display: table; make it work? I can’t find an explanation anywhere.
Thanks so much for this.
@reggie
Take a look at the w3c, it goes into explanation on the display property, http://www.w3schools.com/css/pr_class_display.asp
Mainly what the display:table property is doing is preventing a scrollbar from appearing. When an element is a block, like a div for instance, then the browser is forced to display the whole div even if it goes past the size of the browser window which in that case it will then create a scrollbar so the user can scroll and see the whole block level element.
Table displayed items are not designed to do this. It is just how browsers render them, so this way we don’t create a scrollbar even if the user’s browser window is a smaller size than the background image.
Super awesome! You can see it in action in two separate elements on mrpickle.ca. This little tidbit is what makes my design work.
Thanks again!
Very Nice blog with a ton of informative information. Can you recommend any decent forums or social groups to join that cover these types of topics. Also, I really appreciate the fact that you approach these topics from a stand point of knowledge and information instead of the typical “I think” mentality that you see so much on the internet these days.
Thanks for the complements Randazzo! I hope to keep putting out some useful posts at least every week. If you’re looking for more reads similar to my blog here, my best recommendation is to subscribe to the RSS feeds to all of the sites I list in my sidebar under “Extra Related Links”. I also post articles I find interesting on my Twitter account pretty often, which you can follow me at http://twitter.com/jorenrapini
Wow thanks, i couldn’t figure out how to make this work without getting a horizontal scroll! I also learned that you could put a background to the html tag! thanks!
OK< i’m still not getting this, me and a friend tried a few ways to do this and we still can’s center the page, the background looks fine and could be my imagination but seems to look like it’s expanding but I could be wrong, feel free to checkout the sourse it’s not the double background but I’d apperciate a look see and possibly a fix for it if anyone has some time. Here’s a website of mine to check out.
Sincerely Mark
I looked at your page, and I couldn’t quite understand what you are saying is the problem that you are having?
Internet Explorer has a bug, it doesn’t center both images, it has an one pixel bug/gap. You can see it if you resize the IE window.
CDS
Yup, that’s just the way older IE versions render centered items like this. There isn’t anything we can do about it, as far as I know.
Enjoyed reading this post, thanks a ton
Thanks for the tip.
Hi Joren, I finally found what was making this not work for me. I was under the assumption that doctypes and charsets meant nothing untill I recently updated a few pages. By simply changing to a different doctype and charset, I now have a website to add to my lists with a double repeating background that I have wanted for a long time, also, thank you for all the help both in E mail and online, This trick is a must have and gives you the look of the newer blog styles without the large depricated PNGs associated with them.
Glad it helped. Definitely make sure you’re using the latest XHTML or HTML doctypes with your websites
[...] A nice article on creating a double background with CSS. Double Body Background CSS Trick (Joren [...]
[...] Double Body Background CSS Trick – So, you just created this awesome fancy background for a website. The top part of the background is large and in charge, while everything below it is going to be a repeating background that goes all the way down to the bottom of the page and helps define your website’s borders. This is a tutorial on accomplishing that without creating any scrolling [...]