I recently saw a discussion on CSS-D about multiple background images, and while it doesn’t exactly answer the question I thought I’d share a tip that some of you may find useful. At least until multiple backgrounds with CSS3 is properly supported.
So, what we want to do here is put a background image in each of the four corners of the body. The mark-up we need:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example: A background image in each corner</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="outer_container">
<div id="container">
</div>
</div>
</body>
</html>Unfortunately the extra DIVs are required as a hook for the background images, but we can reduce the number required down to two by using the HTML element and the BODY element as hooks for two of the images.
And the CSS:
* { margin: 0; padding: 0; }
html { background: #fff url(../images/top_left.gif) top left no-repeat; height: 100%; }
body { background: url(../images/top_right.gif) top right no-repeat; height: 100%; }
#outer_container { background: url(../images/bottom_left.gif) bottom left no-repeat; height: 100%; }
#container { background: url(../images/bottom_right.gif) bottom right no-repeat; min-height: 100%; _height: 100%; }The only thing really to note is that _height: 100%; is a hack for IE6 to mimic the behaviour of min-height: 100%;, and will cause the stylesheet to fail validation. You can put that in an IE only stylesheet if that sort of thing bothers you.
Here is our working example. This technique has been tested to work in Firefox, Opera, Safari for Windows, IE7, and IE6.
Also, just as a note this technique can cause some freaky results when page-zoom is used in IE7, but to a lesser or greater extent this sort of thing will always choke a little in IE7 with page-zoom.
5 responses so far ↓
Chris // November 18, 2008 at 11:09 am
If you put in a separate IE6 CSS, won’t that then cause the HTML to fail validation?
Aren’t you just shifting the validation failure from the CSS to the HTML?
Blake // November 18, 2008 at 7:10 pm
To serve CSS to IE6 I would use conditional comments. These are a safe, future-proof, way of serving CSS to only browsers that require it.
I usually use a stylesheet for IE browsers 7 and under, and put all of my IE hacks and other IE code in that. That way they won’t interfere with other browsers or introduce new bugs later on.
Chris // November 19, 2008 at 8:52 am
But the conditional statements won’t be valid HTML. So now you’ve only shifted the error from the CSS to the HTML.
Xanthir, FCD // December 1, 2008 at 2:37 am
No, conditional comments are plain comments, with a special internal syntax that IE looks for. Other browsers (and validators) just see that it’s a comment and ignore it.
Desepreolohom // December 12, 2009 at 6:33 am
Wow, I didn’t know about that up to the present. Cheers!!