table row background image

Question

Possible Duplicate:
Can we solve the table row background image problem, in chrome, in multi celled tables?

I'm trying to have one image as the background for the first row. The problem is that the background gets applied to each cell separately, not as a whole. Is there a way around it?

http://jsfiddle.net/bumpy009/c3txj/

Result should look something like this:

enter image description here

EDIT: The problem appears only in Safari, Opera and chrome. Didn't check IE yet.

take a look at [this answer to a post on the subject](http://stackoverflow.com/a/3052686/547020). there are many out there (on stackoverflow) but this one looks promising. — Eliran Malka, May 09 '12 at 11:34
In your JS Fiddle, with Firefox/Chrome, it *does* look like that. What browser are you using? — David Thomas, May 09 '12 at 11:35
@DavidThomas not for me.. IE and FF it works... but in Chrome it fails, too! — creativeby, May 09 '12 at 12:05
For future readers: [at this thread](http://stackoverflow.com/questions/25312482/background-image-on-tr) is solution for your problem as well — Albert221, Sep 21 '16 at 15:01

Ozzy · Accepted Answer · 2012-05-09T12:19:02.690

5

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

edited May 09 '12 at 12:19

answered May 09 '12 at 12:06

Ozzy

8,244
7
55
95

I only want the background for the first row. – domino May 09 '12 at 12:13
@domino only the first row?! Lemme update my answer... – Ozzy May 09 '12 at 12:17
http://browsershots.org/http://jsfiddle.net/rlemon/c3txj/10/show/ this expires in half hour, but you can always rerun the tool – rlemon May 09 '12 at 12:19

score 2 · Answer 2 · answered May 09 '12 at 12:16

2

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.

answered May 09 '12 at 12:16

Paul

8,974
3
28
48

Thanks, now I've got two working solutions. – domino May 09 '12 at 12:25

table row background image

2 Answers2

Edit

Linked