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

Posted by Ya'el on Stack Overflow See other posts from Stack Overflow or by Ya'el
Published on 2010-06-08T12:54:09Z Indexed on 2010/06/16 11:22 UTC
Read the original article Hit count: 215

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.

© Stack Overflow or respective owner

Related posts about css

Related posts about background-image