css 3 images in td

Question

I'm having trouble adding 3 images to a table cell in css and was wondering if anyone could help me to figure out what I'm doing wrong. Here is what I have:

css

.Example {
        background-image:url("image1.gif"),url("image2.gif"),url("image3.gif");
    background-position: top left, top center, top right;
    background-repeat: no-repeat, repeat-x, no-repeat;
}

html

<td class="Example">
    <a href="example">Example</a>
</td>

When I open the page however, all I get is a cell that says Example with no background image. Any suggestions?

What browser are you trying this in? This is relatively new and not yet fully supported in all browsers. Do the images exist? — Pekka, Sep 30 '10 at 12:03

score 2 · Accepted Answer · answered Sep 30 '10 at 12:24

Try

.Example {
background-image:url("image1.gif"),url("image2.gif"),url("image3.gif");
background-position: top left, top center, top right;
background-repeat: no-repeat;
}

without the three parameters on background-repeat.

And keep in mind that this is not working on every browser.

I suggest you use the old fashion way to resolve this. Put a link on every picture with the same href.

score 1 · Answer 2 · answered Sep 30 '10 at 12:14

1

The only browser projects having this feature implemented so far are WebKit and KHTML (Konqueror). This got into Safari 1.3 though, and works in OmniWeb 5.5 and up.

Source

answered Sep 30 '10 at 12:14

Shikiryu

10,180
8
49
75

score 1 · Answer 3 · edited May 23 '17 at 11:58

Having multiple background images in the same element and the current limitations have been answered here: layering-images-in-css-possible-to-put-2-images-in-same-element and also here: an-i-have-multiple-background-images-using-css

Currently not all browsers support that feature as stated in the answers in the above links. There is also suggestions to work-arounds, such as using multiple Divs and placing each image into its own div and using z-orders to display divs as required.

css 3 images in td

3 Answers3