How to place image behind another image that has a transparent background - html

Question

I have a rounded square box image that has a red strip that runs along the left side and has a transparent background (the white bit) which I created in photoshop. I would like to place an image behind this box. I have tried setting the position:absolute and z-index: -1; however, it places the image behind everything. Is there a way I can achieve this with just the CSS? P.S. I have searched for solutions but the ones I have come across did not seem to help me at all.
CSS:
#boxes img {
border:1px solid;
margin:4px 0 0 0px;
padding:0;
position: absolute;
width: 359px;
height: 218px;
z-index: -1 ;
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
}
#boxes .box {
width:370px;
height:241px;
float:left;
background-image:url(../imgs/box_front.png);
background-repeat:no-repeat;
background-color:#FFF;
margin:80px 30px 0 0;
}

Answer 1

You can't reliably set z-index without setting position on your elements; the stacking is also relative to the elements' containers, so if everything is at root level the image with a negative z-index will disappear behind the page. (Personally, I try and avoid negative z-index values whenever possible.)
#boxes {
position: relative;
}
#boxes img {
border:1px solid;
margin:4px 0 0 0px;
padding:0;
position: absolute;
width: 359px;
height: 218px;
z-index: 1 ;
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
}
#boxes .box {
width:370px;
height:241px;
float:left;
background-image:url(../imgs/box_front.png);
background-repeat:no-repeat;
background-color:#FFF;
margin:80px 30px 0 0;
position: relative;
z-index: 2;
}
EDIT:
The problem is that your HTML is structured so the red stripe is the background image of the container that you're loading the image into. As this also has a background-color, the image is being lost behind it.
A better way of doing this would be to use HTML/CSS' natural document flow - i.e. the later the element appears in the HTML, the 'higher' it is in the natural z-index. This'll mean you don't have to specify z-index values, but you will need to add a presentational div to your code (unless you want to monkey around with :after pseudo-elements):
Each grey box will need to look like this:
<div class="grey box">
<h3>Stationary</h3>
<span class="border"> </span><img src="http://placekitten.com/g/361/220"><div class="innerBox"> </div>
</div>
... and your CSS will need to change. Remove the background from the .box styles, and add this to your CSS:
#boxes .innerBox {
position: absolute;
left: 0;
top: 0;
width:370px;
height:241px;
background-image:url(http://i754.photobucket.com/albums/xx182/rache_R/box_front_zps196242cf.png);
background-repeat:no-repeat;
}
You can then remove the z-index from #boxes .box, and because the innerBox div appears after the image in your markup, it will naturally appear higher than your image.
If you can't add any extra HTML to your markup template, you could repurpose the border divs, which don't seem to be doing much:
#boxes .border
{
border:none;
z-index:1;
cursor:pointer;
position: absolute;
left: 0;
top: 0;
width:370px;
height:241px;
background-image:url(http://i754.photobucket.com/albums/xx182/rache_R/box_front_zps196242cf.png);
background-repeat:no-repeat;
}
You'll need to update your images too:
#boxes img {
/* other declarations */
position: absolute;
left: 4px;
top: 0;
/* other declarations */
}
... and make sure your #boxes .box style has position: relative; set.
That should do you: http://jsfiddle.net/mr3Fq/4/