Background image in a <TR> doesnt work in IE!

Get Started
1

I’m have a problem with a background image in a table with IE , it
works with FF :
I have a table, the <tr> has a background image, but the background repeats in each <td>

2

this is the code

<table width=“500” height=“143” border=“0” cellpadding=“10” cellspacing=“0”>
<tr style=“background:url(http://www.google.ca/intl/en_ca/images/logo.gif) no-repeat bottom”>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

3

Known bug. There’s a workaround using expressions and offsetLeft/offsetTop but I’m too lazy to dig it up/rewrite it right now.

4

if you can put in TR tag, then why not make the image crop then put in TD

5

If you get a chance to find where i can see this fix , i would really appreciate that.

6 
tr { background-image:url(foo); }
td { background-position:expression(-this.offsetLeft); }

or for tbody:

tbody { background-image:url(foo); }
td { background-position:expression(-this.offsetLeft + " " + -this.offsetTop); }
7

I would suggest you just nest another <table> within the <tr> and put an image background for that.

8

I’d suggest only using tables for their intended purpose of displaying tabular data where the content will be easier to read without a background image.

9

Hey, if you want it to work for all browsers, including Firefox AND IE, you have to make a background image in the td. For example:

<table>
<tr><td background=“image/urimage.jpg”>
Hello. Now you have a background image.
</td></tr>
</table>

However, if you have more than one TD in the same TR, the background image will only show up in the specified TDs and if you make it in all of them, it will look like you tiled the background image. So there is no way to make it work for more than one browser unless you can find a way to do it with css. Sorry.

10

Hi petree69, welcome to SitePoint! :wave:

You suggestion was already mentioned in post #4.
Then Simon gave the fix asked for in IE in post #9.

Anyway, glad to have you on board! :slight_smile:

11

<table>
 <tr style=“background: url(/images/tr-background.gif) no-repeat 0 0;”>
  <td>Row 1</td>
  <td>Row 2</td>
  <td>Row 3</td>
 </tr>
</table>

This 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:

<table>
 <tr>
  <td style=“background: url(/images/tr-background.gif) no-repeat 0 0;”>Row 1</td>
  <td style=“background: url(/images/tr-background.gif) no-repeat 50% 0;”>Row 2</td>
  <td style=“background: url(/images/tr-background.gif) no-repeat 100% 0;”>Row 3</td>
 </tr>
</table>

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.

This will fix the issue.

Adarsh K.P.

12

Is Safari still buggy with this?? I thought it was fixed.