Return to Snippet

Revision: 8300
at September 11, 2008 17:54 by demixo


Updated Code
/*
Don't do it the intuitive way...
*/
<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>

/*
...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:
*/

<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.

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

Revision: 8299
at September 11, 2008 17:53 by demixo


Updated Code
/*
Don't do it the intuitive way...
*/
<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>

/*
...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:
*/

<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.

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

Revision: 8298
at September 11, 2008 17:52 by demixo


Initial Code
/*
Don't do it the intuitive way...
*/
<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>

/*
...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:
*/

<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.

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

Initial URL
http://www.plexusweb.com/staff/colin/blog/post/95/Need-a-background-image-on-a-table-row

Initial Description
Gracias a este artículo, pude colocar fondos de imagen a para las filas de una tabla.

Initial Title
background-image para las filas de una tabla

Initial Tags
css, html

Initial Language
XHTML