Can I place an image on a <tr> tag?

Can I place a background image using CSS on a <tr>开发者_Python百科; tag? Will this background image show across all browsers?

HTML:

<table>
    <tr>
        <td> &nbsp; </td>
        <td> &nbsp; </td>
        <td> &nbsp; </td>
        <td> &nbsp; </td>
    </tr>
</table>

CSS:

table { 
    width:300px; 
    height:200px; 
    border:3px solid blue;
}

tr {
    background-image:url(http://dummyimage.com/300x200/f00/000);
    display: block;  
    height: 100%;
}

Live demo: http://jsfiddle.net/simevidas/Jk5BE/5/

Source: http://code.google.com/p/chromium/issues/detail?id=44361

For this to work, you have to set the row height. In my demo, I've set it to 100%, because there is only one row in my table. If you have multiple row, set the height of the row to the height of the background-image.

Yes. And it'll show on all modern browsers.

You can either use the background attribute or do it with CSS.

If you're using it for HTML emails, then it won't show in Outlook 2007 or later, as they use Microsoft Word as the rendering engine. Why? God knows. But they do.

This is tricky. It looks to me like the background image applied in CSS to a tr element gets repeated on each table cell even if you say don't repeat. So if the image isn't a simple gradient with right to left symmetry, you may not get what you expect. Here is an example:

http://jsfiddle.net/Bx998/1/

HTML

<table id="tbl1">

    <tr>
        <td>one</td><td>two</td><td>three</td><td>four</td><td>five</td><td>size</td>
    </tr>

    <tr>
        <td>one</td><td>two</td><td>three</td><td>four</td><td>five</td><td>size</td>
    </tr>

</table>

CSS

#tbl1 tr{
     background: transparent url('http://www.google.com/images/logos/ps_logo2.png') no-repeat;
}
#tbl1 tr td{
  padding: 5px;
    height: 50px;
  border: 1px solid #888;  
}
#tbl1 tr td:first-child{
 padding: 0 0 0 50px;   
}