CSS Double Body Background Image

So you’re designing a website, and you’ve reached a point where you need two background images behind the whole page, both repeating in at least one direction, but not all your pages will be full screen height.

Let’s say that the “farthest” background is an abstract tiled pattern of some kind, and the “nearest” background gives you your column background colours. Let’s also say that you can’t merge the two images into one for some reason (different repeat directions, alpha transparency effects, etc).

If you use CSS to attach the farthest background to the body tag, and attach the nearest background to a div that encloses the whole page, you’ll still have problems if the page content doesn’t reach all the way down the screen.

Sure, you could use a min-height hack on the div, but if you allow for high resolution monitors (1200 vertical pixels or more), people using smaller monitors will see scrollbars that suggest there is much more content, when there isn’t. You could also hack it with JavaScript, but that just isn’t elegant enough, right?

Don’t worry. Here’s a very simple CSS trick (not a hack!) that I learned years ago, promptly forgot about, then rediscovered today when hunting through some old code.

The Code

html { background:url(farthest.png) 0% 0% repeat-x; }
body { background:url(nearest.png) 0% 0% repeat-y; }

Change your position and repeat properties as needed.

This works because the html tag always encloses the body tag, so it will always be at least the full size of the window because the body always is.

Tested on Firefox 3.5, Chrome 3, Safari 4, Opera 10 and Internet Explorer 6, 7 and 8.

Comment if you find it useful, or if you experience a problem with it.

21 Comments

  1. Good tutorial! I am trying to find any alternatives in making a theme with two background. I’ll try this one.

  2. Simple and superb post. I worked out those codes and got the results. Thanks for the information.

  3. Great tips. I was bashing my head against the wall trying to do something similar on one of my sites.

  4. Awesome tips,This one very important to me for designing my website.I will bookmark it and love your blog.Thanks for sharing great tips with us.

  5. Thanks for this…I think this will create the effect that I have been trying to work out.

  6. Thanks for these tips. I have so much more to learn, unfortunately, before I can put these into practice – I don’t understand codes at all although I’ve tried to use them (with a bit of success) occassionally.

  7. Interesting, I never realized that you could use 2 backgrounds like this, so I never actually made a page with multiple backgrounds. But this is a great way to pull this off while keeping your code very clean.

  8. Cheers.

    Found you via Google and it was exactly what i wanted, so thank you.

    Dave

  9. That’s great to know! now if only you could figure out a clean way to have 3 backgrounds… ^_^ not that I’d ever use it. My sites are pretty dry in terms of looks >.<

  10. First time I’ve stumbled upon your blog…great info and thanks for the helpful article!

  11. Ahh, that is a cool little trick. It’ll be cool when CSS 3 finally comes out omg.

  12. gr8 trick and it works too

  13. okey I got the idea but I dont understand this;

    if you use 2 bg this way I think some part of the page will be white becuase one of them only repeat-x the other one is repeat-y

  14. Nice! I love finding these little nuggets on coding that can only come from someone with years of experience. There’s a wealth of knowledge out there. You just have to search.
    Thanks.

  15. great article. i tried it and it works.

  16. Found you via Google and it was exactly what i wanted.
    Simple and good.
    Thank for share.

  17. Thanks a lot, very useful information. Just what I needed!

  18. I’m trying to create a layout on Livejournal with two backgrounds. It’s CSS so I thought this would work. However, all I get is a white screen. I must be doing something wrong. Would you be willing to look at the code and tell me how to do this?

    Thanks.

  19. I don’t work with LiveJournal – why not go to the LiveJournal site and ask there?

  20. Useful tutorial worth keeping in mind when designing a website. Thank you for the advice.

  21. Like the article and the a short trick for managing a background image with the above code is very easy. I am going to bookmark your post. Nice trick shown.