Adding CSS background images to table rows? (tfoot / thead / tbody )

Is this possible at all?

I have quite a 'complicated background image that sits between the head the the content and then again between the table body and the foot.

This is an image that has vertical and horizontal gradient styles so applying a different image to each td is not practical at all. The image spans the width of the table, fade out at each end. Is there away of wrapping the thead in something for example? I imagine this would need 'block' set to it though, which would bork the table?

Any suggestions?

Thanks as always, look forward to hearing your replies!


HTML (pretty standard I think):



<table cellspacing="0" callpadding="0" border="0">
<thead>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 4</th>
<th colspan="2">Title 5</th>
</tr>
</thead>
<tbody>
<tr>
<td class="product">
<img src="placeholder.jpg" alt="ALT TEXT." />
<strong class="product">Product name</strong>
<p>Sub heading</p>
</td>
<td>Product code</td>
<td>Ipsum</td>
<td>25</td>
<td>&pound;1.99</td>
<td><button type="submit">Remove</button></td>
</tr>
<tr>
<td class="product">
<img src="placeholder.jpg" alt="ALT TEXT." />
<strong class="product">Product name</strong>
<p>Sub heading</p>
</td>
<td>Product code</td>
<td>Ipsum</td>
<td>25</td>
<td>&pound;1.99</td>
<td><button type="submit">Remove</button></td>
</tr>
<tr>
<td class="product">
<img src="placeholder.jpg" alt="ALT TEXT." />
<strong class="product">Product name</strong>
<p>Sub heading</p>
</td>
<td>Product code</td>
<td>Ipsum</td>
<td>25</td>
<td>&pound;1.99</td>
<td><button type="submit">Remove</button></td>
</tr>
</tbody>
<tfoot>
<tr class="first">
<td colspan="2" rowspan="3">
<strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</strong>
</td>
<td colspan="2">Sub-total</td>
<td colspan="2">Amount</td>
</tr>
<tr>
<td>Cost</td>
<td colspan="2">Amount</td>
</tr>
<tr>
<td colspan="2">Total to Pay</td>
<td colspan="2">Total Amount</td>
</tr>
</tfoot>
</table>



And the current CSS:



table {
border-collapse:collapse;
color:#583926;
font-size:12px;
margin:24px 0 16px;
overflow:hidden;
width:100%;
}
thead {
background: url(../graphics/table-bg-head.png) no-repeat 0 bottom;
}
tbody {
background: url(../graphics/table-bg-foot.png) no-repeat 0 bottom;
}
thead th {
color:#3b1600;
font-size:14px;
font-weight:bold;
padding:6px 6px 26px;
}
table td {
padding:0 6px 12px;
position:relative;
vertical-align:middle;
}
table .last td {
padding-bottom:36px;
}
table .first td {
padding-top:12px;
}
td.product img {
display:block;
float:left;
margin:0 10px 0 0;
padding:1px 3px 3px 1px;
position:relative;
top:12px;
}
td.product strong {
display:block;
font-weight:normal;
line-height:16px;
margin:15px 0 1px 80px;
}
td.product p {
color:#9d8a7f;
line-height:14px;
margin:0 0 0 80px;
padding:0;
}

Bump :/

can u share mock up of your layout or link of your page.. for better understanding....

Hi yeah sorry...

Here's a quick mock up of the table, they didn't want the actual mock up going up yet before the live date so I've just striped the colours out/changed them, everything else is the same though:

http://i51.tinypic.com/2qvbjwg.jpg

As you can see, pretty standard layout for the checkout/basket table but the long images at the top and bottom of the table make it a bit awkward. Am I right in thinking you can just apply a css background image to thead, tbody or tfoot? Which is what I have done but it doesn't work in IE, Chrome and Safari, but works fine in Firefox and Opera.

I don't think I can wrap anything around the thead, tbody or tfoot because I think its strips them out? Any ideas on a work around or should I be able to apply images to these elements?

Thanks again!