29

It is frequently asked – but I haven’t seen a good answer yet (and I looked). If you set a background image in CSS to a table row- the image will repeat itself in every cell. If you set the position: relative (for the row) and set the background-image: none (for the cells) it solves the problem on IE but not on chrome! I can't use background positioning since there are many calls and their size varies. (And the picture is not symmetrical- It's a fade out from one side. Anybody??

Example for the css code : 

tr { height: 30px; position:relative;}
tr.green { background: url('green_30.png') no-repeat left top; }
tr.orange { background: url('oranger_30.png') no-repeat left top;}
tr.red { background: url('red_30.png') no-repeat left top; }
td { background-image: none; }

The HTML is basic - A multi cell table.

The goal is to have different colors fade into every row, but it could be any non-pattern image.

OverZealous
  • 39,252
  • 15
  • 98
  • 100
Ya'el
  • 291
  • 1
  • 3
  • 6
  • Do you have a live example or some souce markup/css? – Kyle Jun 08 '10 at 13:06
  • 1
    It seems Firefox is the only browser that behaves like it should. Chrome, IE, Opera and Safari all cause the background-image to restart in each cell, rather than flowing nicely uninterrupted for the whole row. This issue is listed on http://code.google.com/p/chromium/issues/detail?id=44361 but looks like it won't be fixed. – Chris McFarland Jun 09 '10 at 05:22
  • Works just fine for me using Google Chrome 5.0.375.55, on Ubuntu 9.10. http://jsfiddle.net/pzjUt/ and what i see: http://img153.imageshack.us/img153/3521/resultm.png – jackocnr Jun 09 '10 at 17:39
  • 1
    UPDATE: oddly enough the new version of chrome (5.0.375.70) broke this again, so now I get the image repeating in each cell... – jackocnr Jun 16 '10 at 09:44

3 Answers3

11

Ok, I spent ages reading about this, and couldn't find an easy fix for all browsers, but as I see you are using fixed height rows, I've developed my own workaround: http://jsfiddle.net/DR8bM/

Basically, instead of putting the background image on the row, you put it on an absolute-positioned div in the first cell of each row (and expand it to fill the whole row). This is slightly hacky, but may be the only reliable way to achieve what you want.

jackocnr
  • 17,068
  • 10
  • 54
  • 63
4

Add float:left to the row, that should fix it.

tr {float:left;}
Aziz
  • 7,685
  • 3
  • 31
  • 54
  • worked for me. solved the problem in chrome and safari; didn't cause any problems, that i can see, in firefox and internet explorer (where the original problem didn't exist) – that0th3rGuy May 10 '12 at 12:21
  • 5
    When applying this fix, I'm losing all my column widths. Would only work if you have you widths predefined!? – blo0p3r Jun 28 '13 at 16:05
  • @blo0p3r You are right. But it is a kind of flex style: [See my codepen](http://codepen.io/HerrSerker/pen/JEvHA) – yunzen Jul 08 '14 at 14:42
  • In Chrome seems to work only if there is no cells in the row, which have background set themselves. – Rauli Rajande Jun 09 '15 at 13:13
2

Tested in Chrome 54 on Windows 10:

tr {
  background-attachment: fixed;
}

Though it seems it's not without bugs - the background image only repeats throughout the viewport at loadtime, which means that the cells that appear when you scroll down doesn't have the background.

davidanton1d
  • 319
  • 3
  • 10