Im trying to style a table row to have a background image. Inside the row are table headers, but in IE the image is repeating across the <th> elements, not the <tr>

I know this because if I set:

th {
background:none}

then the background dissappears completely!

Here is my CSS:

table {
width:620px;
border-collapse:collapse;
border:none;}

tr.head {
background:url(../image/tableHead.gif) no-repeat 0 0;}

tr.head th {
height:35px;}

HTML:

<table>
        <tr class="head">
          <th scope="col">&nbsp;</th>
          <th scope="col">&nbsp;</th>
          <th scope="col">&nbsp;</th>
          <th scope="col">&nbsp;</th>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>

Anyone have any ideas?? Ive never encountered this problem before!
Thanks.

Apply the background image to the CSS for the <th>

tr.head th {
background:url(../image/tableHead.gif);}

Nah cant unfortunately, the image takes up the full length of the row so if i apply it to the <th> it repeats across

add

background-image:none;
background-color:transparent;

to the th, it should prevent in inheriting the image (which shouldn't happen) and allow the tr background to show through.