Talk to me about anything. If you’d like to work with me, or
even if you just need a hug, I’ll get back to you shortly.

Please enter your name

Please enter a valid e-mail

It's cold!

Say something!

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. 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.

66 Comments
  1. Tom says:

    Joren Rapini you’re my hero.

    Thanks for the temp page feedback by the way. It was helpful, ass. lol.

  2. Joren Rapini says:

    @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.

  3. Staicu Ionut says:

    Yeah, but why should i use an extra div when i can use html and body tags for styling? :)

  4. Gabe says:

    LOVE IT – was just needing something like this, thanks!

  5. Joren Rapini says:

    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;
    }

  6. heather says:

    This is amazing, just earlier today I was wondering the best way to go about this, thanks so much for sharing!

  7. B. Moore says:

    wow learn something new everyday! thanks for the tips everyone :)

  8. Joren Rapini says:

    Glad it helped. . . with Staicu’s input, now you can make a TRIPLE background haha. Not sure where that would come in handy though ;)

  9. Zoomrix says:

    Sweet! Just what I wanted.

    Thank you.

  10. Andy says:

    “… now you can make a TRIPLE background haha. Not sure where that would come in handy though”

    just think of the footer!

  11. reggie says:

    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.

  12. Joren Rapini says:

    @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.

  13. reggie says:

    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!

  14. Randazzo says:

    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.

  15. Joren Rapini says:

    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

  16. Anabelle says:

    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!

  17. Mark says:

    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

  18. Carlos David says:

    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

  19. Enjoyed reading this post, thanks a ton ;)

  20. Mark says:

    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.

  21. Arif says:

    Thanks for Double BG……..

  22. ismael says:

    Doesn’tt works in ie6….

  23. I was going to mention the “use the HTML tag” trick too,

    so instead I’ll give a way to pop in a third, fixed background in between the two.

    style the HEAD tag.

    HTML {
    height:100%; width:100%; /* this ensures the head tage will stretch */
    background: blah blah blah
    }

    HEAD {
    display:block /* makes it visible. */
    width: 100%; height:100%;
    position:fixed; /* i haven’t tried any other values, but assume they’d casue the background to scroll up and out if the page is longer than the viewscreen dimensions */
    background: blah blah blah
    }

    BODY {
    /* style as normal */
    }

    It won’t work in IE6, but will in IE7+ and Firefox, webkit and Opera browsers.
    I’ve used it to put a huge alpha “spotlight” effect on a site to add slight gradient texture to the background.

  24. NotTopHatter says:

    The html {} body {} trick for two backgrounds thing is ok, but it only displays as much as the body, so it’s height is finite. And if the body content isn’t much and the bg is meant to be big, it won’t work. Better than nothing, though.

  25. RaphaelDDL says:

    If i’m not mistaken, some Opera browsers ignore some of HTML styles. But anyways, good trick, i always do that.

  26. Very nice tuts for designing a web with css. Very easy to follow and learn, even for newbie like me… Good work!

  27. van says:

    So Coooool Thx u so much.

  28. Aaron Lozier says:

    This problem was really stumping me until I came across your blog. Learn something new every day. Thanks!

  29. Thank you for that wonderful post. Looking for more. bye bye.

  30. Thank you for this useful post. Looking for much. ciao.

  31. Thanks a lot of good write.

  32. estetik says:

    thank you very much

    good blog

  33. jane lu. says:

    hey beautiful blog siteI wanted to thank you for this interesting

  34. Ben Butler says:

    Thanks so much. I’ve used this trick a few times.

  35. evdeneve says:

    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

  36. evdeneve says:

    nivel artístico ya que ahora practico sus canciones y intento mejorar escuchandolos a ellos

  37. dezda says:

    Thank you for that wonderful post. Looking for more. bye bye

  38. dezda says:

    If i’m not mistaken, some Opera browsers ignore some of HTML styles. But anyways, good trick, i always do that.

  39. Magazin says:

    Thanks so much. I’ve used this trick a few times.

  40. Nice one, thanks for this trick, very useful.

  41. Crowdfinch says:

    This is a really good read for me, Must admit that you are one of the best bloggers I ever saw. Looking forward for your next one.

  42. ay blog says:

    i like this
    thanks

  43. sarkilar says:

    So Coooool Thx u so much.

  44. Frank says:

    Thanks, works very well!

  45. Mobilsohbet says:

    Thank you. . . . . . .

  46. adana-sohbet says:

    Thank you. . . . . . .

  47. CSS is beautiful.
    I loved the trick.

  48. Mtgktnhy says:

    I sing in a choir http://ocafiilemy.de.tl pedo pics rape bbs ok where did the couch come from or is it there so guys can hang out and watch other guys piss??

  49. [...] A nice article on creating a double background with CSS. Double Body Background CSS Trick (Joren [...]

  50. [...] 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 [...]

Leave a Reply


This site is protected by Comment SPAM Wiper.