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. click says:

    Just to let you know your site looks a little bit unusual on Safari on my laptop using Linux .

  2. rahul says:

    Thanks for sharing such a nice post with us here. It really attracted me a lot and I book marked your blog for future reference.

  3. Agugxvyj says:

    I love this site privatespice
    is this german or something

  4. Iiysxgfw says:

    I was made redundant two months ago bornpornstars
    Yeah, I want to be a loser.

  5. Leslie says:

    I’m a housewife bear hug fuck lolitas ya just come in and let me get my keys n fuck u haha wtf? lol ah this guy is a dbag lol

  6. Diana says:

    Stolen credit card best preteen lolita paysites she knows how to suck a dick for sure,

  7. kamalam says:

    Thanks To Share..This is nice blog to gain about web design templates services.we will come under that professional services only to reach the high position.we are the leading in services of web design madurai

  8. Elijah says:

    History preteen boys cock i wish you could see her tits more

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

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