CODEWITHSUNDEEP
htmlcss
pvieira
pvieira

Reputation: 1695

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

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

Answers (6)

Jitendra Vyas
Jitendra Vyas

Reputation: 152945

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

Patrick McElhaney
Patrick McElhaney

Reputation: 59351

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

dave henning
dave henning

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

Tom
Tom

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

Mihai Toader
Mihai Toader

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

Samir Talwar
Samir Talwar

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

Related Questions