I have [this linked code](http://jsfiddle.net/q2rpp/), which creates a transparent text box with an overlapped image. However, how do I get the image to be behind the text box, with the transparency effect? Right now, the image is blocking the text etc.

Thanks.

```
    <div class="grid12-6">
<!-- start text box div -->
<div style="z-index:1;width: 75%; -webkit-border-radius: 35px 0px 35px 0px; -moz-border-radius: 35px 0px 35px 0px; border-radius: 35px 0px 35px 0px; background:rgba(0,120,0,0.5); padding: 25px 0px 25px 25px; -webkit-box-shadow: #B3B3B3 5px 5px 5px; -moz-box-shadow: #B3B3B3 5px 5px 5px; box-shadow: #B3B3B3 5px 5px 5px;">
<ul style="font-size: larger;color:#fff;">
<li>some text</li>
<li>some text</li>
<li>some text</li>
<li>some text</li>
<li>some text</li>
</ul>
</div><!-- end text box div -->
    <div style="z-index:0;position: relative;top:-25px">
        <img src="http://placekitten.com/200/200" alt="" /></div>
</div>

```