Need a background-image on a table row?

Posted on 11/17/2006 by Colin
12 Comments |

Don't do it the intuitive way...

...because it doesn't work in IE6 or Safari, even if you set the <td> background element to 'transparent' or 'none'.

But you can still make it happen with just the one image:

You're just altering the background-position of the image, so that what should be on the left goes on the left (at 0), the middle part goes to the middle (50% horizontally), and the last part goes at the end (100%). Remember that values in the background-position element are ordered horizontal, then vertical, unlike the margin and padding elements.

And, of course, you'll want to separate presentation from content by putting the CSS elsewhere and classing the td's.

Comments

Posted by Jamie Fehr on March 01, 2007

Came across this same problem, I haven't yet figured out how to make safari play nice, but Internet Explorer will respect your Background Image declaration if you add position: relative; after the image declaration. Hopefully I'll get the safari thing figured out before long.

Posted by DraganR on April 03, 2008

This thing works! Thanks for the tip. I'm testing my layout in IE7, Opera 9.02 and Firefox 2.0. By the way, I didn't need to set position to relative. Here's my row declaration:

1 2 3

Posted by scott Dilley on June 24, 2008

you rock.

Posted by Saša Mladenović on September 18, 2008

Man thanks a lot. This thing was pissing me off for too long.

Posted by eznyc on October 21, 2008

Thank you so much!

Posted by juss on November 01, 2008

I found this solution that works fine for i6 and opera 9 Basically you need to set relative the postion of the TR: http://www.mynameisal.com/2008/07/30/background-image-on-table-rows-repeating/

Posted by Bagnall on March 05, 2009

...tr{ position: relative; } ...td{ background-image: none } works on IE but doesn't fix safari. The suggested solution at top, doesn't help if your background image is not uniform and the columns are not uniform widths, though you could tweak the position, it still does not help if you want to change the background image for the whole row in the :hover state.

Posted by Colin Jones on March 05, 2009

Right, if the image isn't uniform you would have to tweak the background-position. If you need something more complicated with a :hover state as you're describing, it seems like you could specify similar background-positions for td.first:hover, td.second:hover (though you'd have to add in the classes for .first, .second, etc.)

Posted by mauricioprado on March 29, 2009

i guess there is no workaroud to put it into a .css....

Posted by mihufnagl on May 14, 2009

I have the same problem. Safari on PC and on iphone do inherit the background image to td. You cannot fix it with background-image:none; I tested in Safari 4

Posted by Roberto on June 09, 2009

Thank you Google Thank you Colin :)

Posted by Clay Shentrup on June 25, 2009

I found a way to make this work for any generic set of defined-width td's. The trick is to understand that a percentage specification must match for both entities. So in this case of 3 td's, the 50% means that the middle point of the second td must match the middle point of the background-image. But obviously that gets complex if you have some series of widths. A little algebra helps.

In my case, the first td is 20% width, then there are 5 td's of 16% width.

So the percentage width for each background specification is: p = 100L / (100 - T) where L = total width of everything to the left of the td T = width of the td

So for instance, my first td, of width 20, obviously uses a 0%. The next td is 16% wide, and starts 20% from the left. So L = 20% and T = 16%.

So p = 2000/84 = 23.809.. or just round it to 23.81.

And so on...yay...