TD multiple backgrounds

[Readie]

While this has never been critical for me, I have often wondered if it's been possible. I have often had something along the lines of:

td.navbg {
background: url('navbg.png');
background-repeat: repeat-x;
background-color: #000000;
}

However as I've never actually wanted it for anything other than to fade an image/colour to the base background colour of the cell I want, I've always survived with the work-around of a background-color attribute.

What I want to know is: is it possible to have a non-repeating background image, or repeating along only one axis, and then a repeating background image underneath in the same cell?

I've experimented before (having found nothing of use with a quick search of Google) and the best I managed to produce was defining a background for the table, and every other cell has it's own repeating background.

Regards,

Readie

[CSS_Kidd]

Try giving the TD the repeating background image then put a div with the no-repeat background in that and put your content in that div.

td.navbg {
background: url('navbg.png');
background-repeat: repeat-x;
background-color: #000000;
}

td.navbg div {
background: url('foo.png') no repeat;
}

<td class="navbg">
<div>
content
</div>
</td>

[alt131]

is it possible to have a non-repeating background image, or repeating along only one axis, and then a repeating background image underneath in the same cell?

Multiple backgrounds (with individual positioning) are part of css3. There is an article and demonstration at css3info [css3.info], and a link to the relevant sections of the candidate recommendation from that page. (Also follow the link to an example for layering backgrounds)

One of the css3info authors is a member here and could give you more up-to-date information, but so far as I am aware only webkit has implemented multiple backgrounds at this stage. Apparently it is part of Gecko 1.9.2, and hence firefox 3.6, also Chrome and Konqueror (I haven't tested), and implementation is planned for ie9. Ironically ie5.5 helpfully applies a table background-image despite not understanding css3 syntax!

At this stage it is common to use the technique suggested by css_kidd to simulate multiple backgrounds, but depending on what you want to do, this may help - although not technically two backgrounds in the same cell:
FF2-3, Opera 9+ and ie8 accept a background-image (including positioning) applied to all of table, tr and td. They will also apply a background-color on tr which becomes an additional option if the tr background-image is not fully repeating, or the images on other elements have transparency.

When combined with cell-spacing/padding and borders, this makes interesting visual effects possible - without the additional mark-up required by css_kidds method.

Unfortunately ff0, ie6-7 and Opera<9 only seem to accept a background-image on table and td - with a couple of interesting quirks:
1. If there is no background-position set for the td, both appear to apply positioning that has been set for the table or the tr.
2. If a background-image is set for tr, but not for td, both will apply the tr background-image as if it was set for the td.

While these things limit the visual possibilities for users with older browsers, at the same time they also provide opportunities to present a progressively enhancing design to more capable ua's.

[Readie]

Ahh, so this idea is a little ahead of current potential then. Thanks for the ideas on the work-around solutions though :)

Regards,

Readie