table row background image [duplicate]

Answer 1

I don't know about your cell widths (are they variable?), but table elements render as such. For getting the desired effect, they need to be displayed as something else:

tr {display: block;}
td, th {display: inline-block; background: transparent;}

You will notice, that now you need to set widths for td and th elements, though.

See Demo.

Answer 2

If you want it across each row, why not make it the table background instead and repeat it in the y-axis?

table {
    width: 300px;
    background-image: url('mypic.jpg');
    background-repeat: repeat-y;
}

BTW I tested your code with IE9, FF12 - those are showing the image once per row. But Chrome 15 & Safari 5 is repeating it for each td.

Edit

Since you only wanted it in the first-row, you should use background-position to make sure the image stays at the top of the table (that's usually where the first row is, right? :P)

table {
    width: 300px;
    background-image: url('mypic.png');
    background-repeat: no-repeat;
    background-position: center top;
}