title: Can we solve the table row background image problem, in chrome, in multi celled tables?
body: <p>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 <code>position: relative</code> (for the row) and set the <code>background-image: none</code> (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??</p>
  
  <p>Example for the css code :  </p>
  
  <pre><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; }
  </code></pre>
  
  <p>The HTML is basic - A multi cell table.</p>
  
  <p>The goal is to have different colors fade into every row, but it could be any non-pattern image. </p>