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.
