Can I set two background images on the same element with CSS?

Question

Sample HTML code:

<table>
<tr>
 <td class="a b">

Sample CSS file:

.a
{
  background-image:url(a.png);
}

.b
{
  background-image:url(b.png);
}

It seems like the "b" part is ignored.

Is there any way to inlclude both images in the same cell, even using other technique?

Answer 1

Now you can do with CSS3. http://www.zenelements.com/blog/css3-background-images/

#my_CSS3_id {
background: url(image_1.extention) top left no-repeat,
url(image_2.extention) bottom left no-repeat,
url(image_3.extention) bottom right no-repeat;
}

Answer 2

You could do this:

<td class="a"><div class="b">...</div></td>

Then the td will have the first background, and the div inside it will have the second. If one is transparent, the other will show through. I think b.png will be on top, but I'm not sure about that.

Answer 3

It's an intriguing idea, but think about how other properties work, such as color.

.a { color: red; }
.b { color: blue; }

How could the text be both red and blue? In this case, blue wins the tiebreaker, because it's specified later.

There may be another way, if you can create an image ab.png that is the result of combining of a.png and b.png.

.a { background-image(a.png) }
.b { background-image(b.png) }
.a.b { background-image(ab.png) }

Caveat: It doesn't work in IE6.