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

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 2

You can't have both images as a bg image for a cell. You need to make 2 cell or put the images as <img ... /> tags inside the cell. Also some browers have issues reading class="a b c" class definitions.

Answer 3

No, every declaration of background-image will replace/ override the previous one for a given element. You'll need to nest an element for every additional background you want to apply. If you're trying to apply a fancy border to an element, there are some new border properties in CSS3, but they're not widely supported.

Answer 4

something like this could work:

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

and the css:

.a
{
  background: url(a.png) top left no-repeat;
}

.b
{
  background: url(b.png) top right no-repeat;
}

set the div wide enough and you'll see one image floating in the top left and the other in the top right

Answer 5

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.

Answer 6

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;
}