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?

Answer 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

Answer 2

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.

Answer 3

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.