Multiple CSS Background Images

One of the biggest annoyances with CSS is the inability to apply more than one background image to a box.

I’m currently working on a site that is in particular need of this. The only way to tackle it, at the moment, is to throw an ass-load of span or div tags in the mix (or to rely on tags that are slightly more meaningful, if they’re appropriate, but that’s not always possible).

Here’s the situation. I have a list item that needs a particular little image in it. On top of that I need curved corners. Because I want the whole thing to expand and contract regardless of the size of the content within it, that means I need a separate background image for each corner.

So the HTML inevitably looks like this:

<li><span><span><span><span>Booby</span></span></span></span></li>

Urgh.

And the CSS looks something like this:

li {
	background: url(booby.jpg) center no-repeat;
}
li span {
	background: url(corner_top_right.gif) top right no-repeat;
	display: block;
}
	li span span {
	background: url(corner_bottom_right.gif) bottom right no-repeat;
}
	li span span span {
	background: url(corner_bottom_left.gif) bottom left  no-repeat;
}
	li span span span span {
	background: url(corner_top_left.gif) top left no-repeat;
	padding: 0.5em;
}

One image for a pretty little background, and one image for each of the corners.

CSS 3’s got provision for multiple backgrounds, which would be wonderful. If only it was a practical option.

thanks http://www.htmldog.com/ptg/archives/000107.php

---

with CSS2

Multiple background images

Only Safari supports multiple background images.
Explorer Mac shows the second background image.

Note that the values for each background image are comma separated. The background-repeat has only one value, which counts for both background images.

div.test {
	background-image: url(../pix/logo_quirksmode.gif), url(../pix/logo_quirksmode_inverted.gif);
	background-repeat: repeat-y;
	background-position: top left, top right;
	width: 385px;
	height: 100px;
	border: 1px solid #000000;
}