Add background image to Shopping Cart

[djmatrix]

Hello everybody

 

I have moved my shopping cart into the header but i need to add an image behind the shopping cart details.

 

Also not sure if i have done this right but to get the image and the text to line up correctly i had to use table which i think is probably one of my problems.

 

Here is the code that places the shopping cart in the header.

 

<div id="header" class="grid_24">
 <div id="storeLogo"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?></div>
<div id="headerCheckout">
<table width="300px" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td width="40px"><?php echo '<a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . tep_image(DIR_WS_IMAGES . 'cart.png', HEADER_TITLE_CART_CONTENTS) . '</a>';
?>  </td>
   <td><font face="Arial" color="white" size="2"><?php
 echo ' Item(s):' . $cart->count_contents() ;
 if ($cart->count_contents() > 0) {
   echo '   - Total: ' . $currencies->format($cart->show_total());
 }
?></font>
  </td>
 </tr>
</table>
</div> 

 

The shopping cart details are below the store_logo which is where i want it.

 

Here is the CSS code

 

#headerShortcuts {
 float: left;
 margin-top: 150px;
 margin-left: -295px;
}

 

I have tried putting the image in the CSS but it does not show. Can someone please advise me on the following.

 

1. How do i align image and text to be vertically aligned middle using correct code for 2.3

2. how do i get a image to show behind the shopping cart.

 

Thank You in advance for your help.

[djmatrix]

sorry the correct CSS is as follows.

 

#headerCheckout{
float: left;
margin-top: 150px;
margin-left: -295px;
}

[djmatrix]

Anybody have any ideas. Really need this to complete my header.