CSS Double Body Background Image

Published 24 Nov 2009 in Design, HTML & CSS by ZigPress

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. On 30 Nov 2009 at 07:35, Web Design of Spiral Notes said:

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

  2. On 30 Nov 2009 at 13:57, Mark Henry said:

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

  3. On 01 Dec 2009 at 02:43, Darrin said:

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

  4. On 02 Dec 2009 at 10:28, albuquerque law firm said:

    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. On 06 Dec 2009 at 21:02, Ranasaur said:

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

  6. On 07 Dec 2009 at 00:08, Mia said:

    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. On 07 Dec 2009 at 21:44, Baltimore Movers said:

    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. On 15 Dec 2009 at 18:47, Dave said:

    Cheers.

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

    Dave

  9. On 29 Dec 2009 at 19:50, Jonathon said:

    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. On 06 Jan 2010 at 20:23, Clayton Shumway said:

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

  11. On 12 Oct 2010 at 22:53, Waterproof Socks said:

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

  12. On 21 Nov 2010 at 18:02, Aaron said:

    gr8 trick and it works too

  13. On 27 Jan 2011 at 19:18, CommandoS said:

    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. On 08 Apr 2011 at 15:49, ADHD Doctors Connecticut said:

    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. On 20 Apr 2011 at 18:13, Mark Baleos said:

    great article. i tried it and it works.

  16. On 27 Apr 2011 at 10:13, VnTim™ said:

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

  17. On 12 May 2011 at 03:23, Website Redesign said:

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

  18. On 21 Jul 2011 at 07:07, Sorcha said:

    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. On 23 Jul 2011 at 08:25, ZigPress said:

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

  20. On 26 Oct 2011 at 12:58, Albuquerque Lawyers said:

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

  21. On 02 Jun 2013 at 17:30, Website Design Dubai said:

    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.