Reputation: 1695
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?
Upvotes: 9
Views: 16448
Reputation: 152855
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;
}
Upvotes: 18
Reputation: 59341
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.
Upvotes: 2
Reputation:
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
Upvotes: 1
Reputation: 22841
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.
Upvotes: 1
Reputation: 12253
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.
Upvotes: 0
Reputation: 14330
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.
Upvotes: 7