title: CSS background issue with table row in Google Chrome
body: <p>I have a table in which I have this</p>
  
  <pre><code>&lt;/tr&gt;
  &lt;tr class="table-top-background" &gt;
  &lt;td class="thread-pic" &gt;&lt;/td&gt;
  &lt;td class="thread-top-middle"  colspan="2" &gt;Threads&lt;/td&gt;
  &lt;td class="thread-information"&gt;Last Post&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>So I want to give background image to my tr, so I put this</p>
  
  <pre><code>    .table-top-background
  
      {
          background:url('/img/design/extra-large-back.png') no-repeat;
          position:relative;
          color:White;
          height:31px;
      }
  
      .thread-pic
  {
     width:30px;
  }
  
  .thread-information
  {
      width:280px;
  }
  
  .thread-top-middle
  {
      width:418px;
  }
  </code></pre>
  
  <p>The problem is that in all browser's it is fine expect Google Chrome.
  In Google Chrome it seems that I give background not to tr, but to all td's... It repeat same background for each td.</p>
  
  <p>It is the same in IE7, but in one of stackoverflow questions I read about solving that with <code>position:relative</code> and it helped.
  But I didn't find any solutuin for Chrome.
  I try to give tr css like this also</p>
  
  <pre><code>.table-top-background
  
  {
      background:url('/img/design/extra-large-back.png') no-repeat 0% 100%;
      display:block;
      position:relative;
      color:White;
      height:31px;
      width:728px;
  }
  </code></pre>
  
  <p>But it change all my table design... At that time text's in td's of this header row aren't in that places and also <strong>all other first td's of my table are in the same size as my header tr</strong> . It seems really hillarious.</p>
  
  <p>I tried also to give <code>display:inline-table</code> instead of <code>display:block</code> and it didn't help me too...
  What is the solution of that problem?</p>
  
  <p><strong>EDIT:</strong> Same problem is in Safari, so it is webkit problem.</p>