Multiple CSS boxes on a page with different background images used.

I have a page that has four CSS boxes stacked on top of each other. Each box is using a different background image. I identified each box with their own id’s. The issue I’m having is that the last box of the series--it’s image is over the preceding boxes. I was playing with the width of the boxes and could see that the correct images were there but the last boxes image was laying on top of them, thus blocking them from view. Here is the CSS and box code.

#bestsellers .cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2 {
background: transparent url(../images/box_bestsellers.png) no-repeat bottom right;
}
#comingsoon .cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2 {
background: transparent url(../images/box_comingsoon.png) no-repeat bottom right;
}
#whatsnew .cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2 {
background: transparent url(../images/box_whatsnew.png) no-repeat bottom right;
}
#freeshpping .cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2 {
background: transparent url(../images/box_freeshipping.png) no-repeat bottom right;
}
.cssbox {
width: 285px !important; /* intended total box width - padding-right(next) */
width: 285px; /* IE Win = width - padding */
padding-right: 15px; /* the gap on the right edge of the image (not content padding) */
margin: 20px auto; /* use to position the box */
float:left;
}

/* set the top-right image */
.cssbox_head {
background-position: top right;
margin-right: -15px; /* pull the right image over on top of border */
padding-right: 15px; /* right-image-gap + right-inside padding */
}
/* set the top-left image */
.cssbox_head h2 {
background-position: top left;
margin: 0; /* reset main site styles*/
border: 0; /* ditto */
padding: 25px 0px 15px 50px; /* padding-left = image gap + interior padding ... no padding-right */
height: auto !important;
height: 1%; /* IE Holly Hack */
font-family: "Comic Sans MS", "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #ffffff;
}

/* set the lower-left corner image */
.cssbox_body {
background-position: bottom left;
margin-right: 1px; /* interior-padding right */
padding: 15px 15px 15px 20px; /* mirror .cssbox_head right/left */
}

Include file (this actually holds the CSS box code):

<div class="cssbox">
<div class="cssbox_head"><h2><?php echo($CalloutTitle);?>:</h2></div>

<div class="cssbox_body">
<p align="center"><img src="cw3/Assets/product_thumb/<?php echo($row_rsGetCallout["prdctImage_FileName"]);?>" alt="<?php echo($row_rsGetCallout["product_Name"]);?>">


<p align="left"><?php echo(substr($row_rsGetCallout["product_ShortDescription"], 0, $CalloutCharacterLimit));?></span>...</p>
<p>
<a href="<?php echo($cartweaver->settings->targetDetails);?>?ProdID=<?php echo($row_rsGetCallout["product_ID"]);?>">More &raquo;</a>


<a href="<?php echo($cartweaver->settings->targetResults);?>?category=<?php echo($row_rsGetCallout["prdt_cat_rel_Cat_ID"]);?>">See all <?php echo($CalloutTitle);
if ($CalloutTitle == ’Featured Item’) echo(’s’);?> &raquo;</a>
</p>
</div><?php
} /* END if($recCounter == $pickedIndex) */
} while ($row_rsGetCallout = $cartweaver->db->db_fetch_assoc($rsGetCallout));
} /* END if($rsGetCallout_recordCount != 0) */
?></p>
</div>

Then the actual code from the file:
<div id="whatsnew">
<?php
/* Set the Callout CategoryID for the Callout Widget*/
$CalloutCategoryID = 15;
/* Set the Callout Title for the Callout Widget*/
$CalloutTitle = "What’s New";
include("_inc_FeaturedProductPlugIn.php");
/* Use the clear style to push content that follows the widgets to the line below them */
/* Set the Callout CategoryID for the Callout Widget*/
?>
</div>
<div id="bestsellers">
<?php $CalloutCategoryID = 16;
/* Set the Callout Title for the Callout Widget*/
$CalloutTitle = "Best Sellers";
include("_inc_FeaturedProductPlugIn.php");
/* Use the clear style to push content that follows the widgets to the line below them */
/* Use the clear style to push content that follows the widgets to the line below them */
?>
</div>
<div id="comingsoon">
<?php /* Set the Callout CategoryID for the Callout Widget*/
$CalloutCategoryID = 14;
/* Set the Callout Title for the Callout Widget*/
$CalloutTitle = "Coming Soon";
include("_inc_FeaturedProductPlugIn.php");
/* Use the clear style to push content that follows the widgets to the line below them */
/* Use the clear style to push content that follows the widgets to the line below them */
?>
</div>
<div id="freeshpping">
<?php /* Set the Callout CategoryID for the Callout Widget*/
$CalloutCategoryID = 17;
/* Set the Callout Title for the Callout Widget*/
$CalloutTitle = "Free Shipping";
include("_inc_FeaturedProductPlugIn.php");
/* Use the clear style to push content that follows the widgets to the line below them */ ?>
</div>

Would appreciate any help/suggestions.

Thanks
Cheryl

havent looked much into your code but think you should add this this in the CSS;
z-index:2;

Value 1 is behind value 2 etc.
z-index:1;