I have several divs, each containing 2 transparent images that should be stacked.
I have tried with setting the first as a background. For some reason the img is not transparent.
Then i tries to stack the images inside the div. But i still have the transparency problem.
Check the fiddle : http://jsfiddle.net/Epby4/
<div class="row">
<div class="span9">
<div class="ring" id="ring57">
<a class="images" href="/rings/57/edit">
<img src="https://lxproject.s3.amazonaws.com/uploads/band/img/29/thumb_ringblack.png" width="160">
<img class="cut" src="https://lxproject.s3.amazonaws.com/uploads/cut/img/11/thumb_roundcut.png" width="160" style="background-color : transparent;">
</a>
</div>
<div class="ring" id="ring66">
<a class="images" href="/rings/66/edit">
<img src="https://lxproject.s3.amazonaws.com/uploads/band/img/27/thumb_band_yellow.png" width="160">
<img class="cut" src="https://lxproject.s3.amazonaws.com/uploads/cut/img/14/thumb_ring4_center.png" width="160" style="background-color : transparent;">
</a>
</div>
<div class="ring" id="ring67">
<a class="images" href="/rings/67/edit">
<img src="https://lxproject.s3.amazonaws.com/uploads/band/img/27/thumb_band_yellow.png" width="160">
<img class="cut" src="https://lxproject.s3.amazonaws.com/uploads/cut/img/15/thumb_ring5_center.png" width="160" style="background-color : transparent;">
</a>
</div>
</div>
</div>
and the css :
div.ring {
float: left;
position: relative;
border: 1px solid red;
width:160px;
height:130px
}
div.ring img {
position:absolute;
background: transparent;
}