title: HTML <thead> with background image rendering difference between IE and Firefox
body: <p>I have a table coded in HTML as follows;</p>
  
  <pre><code>&lt;table border="1" class="tableBasic"&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th rowspan="2"&gt;Head Row 1&lt;/th&gt;
          &lt;th rowspan="2"&gt;Head Row 1&lt;/th&gt;
          &lt;th rowspan="2"&gt;Head Row 1&lt;/th&gt;
          &lt;th colspan="4"&gt;Head Row 1&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th&gt;Head Row 2&lt;/th&gt;
          &lt;th&gt;Head Row 2&lt;/th&gt;
          &lt;th&gt;Head Row 2&lt;/th&gt;
          &lt;th&gt;Head Row 2&lt;/th&gt;
      &lt;/tr&gt;
  
  &lt;/thead&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>So this is a table header spanning 2 rows.</p>
  
  <pre><code>.tableBasic thead{
      background: url("/images/tbl_header.png") repeat-x scroll 0 0 transparent;
  }
  </code></pre>
  
  <p>Is there a rendering difference for the background image between IE and Firefox?</p>
  
  <p>While IE shows the background image as spanning 2 rows (i.e. equals 2 row height), Firefox just shows it for the first row (and does not show any background for the 2nd row)</p>
  
  <p>The background image is tall enough to span 2 rows height.
  Unfortunately I won't be able to modify the HTML code and only can control this from the CSS.</p>
  
  <p>How do I fix this issue in CSS? </p>
  
  <p><strong>IE</strong>
  <img src="https://i.stack.imgur.com/zvoHp.jpg" alt="enter image description here"></p>
  
  <p><strong>Firefox</strong>
  <img src="https://i.stack.imgur.com/dz8ad.jpg" alt="enter image description here"></p>