CODEWITHSUNDEEP
htmlcssimage
Martin Bean
Martin Bean

Reputation: 39389

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

Can I place a background image using CSS on a <tr> tag? Will this background image show across all browsers?

Upvotes: 1

Views: 6094

Answers (3)

Šime Vidas
Šime Vidas

Reputation: 185933

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.

Upvotes: 1

rcravens
rcravens

Reputation: 8390

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;   
}

Upvotes: 0

Rich Quick
Rich Quick

Reputation: 1

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.

Upvotes: 0

Related Questions