How to set background image to display before the content of img tag?

Question

I've a div and inside the i place a image using img tag

and in the stylesheet, i used a background-image for that div and aligning it center with z-index value 1 ..

And i use another style for img inside that div with the z-index value -100

So i expect the background image to come front of the image..

I think i'm doing something wrong

My code is

.video-thumb
{
height:72px;
width:120px;
background:#ffffff;
background-image:url('http://doamin.com/images/play.png');
background-repeat:no-repeat;
background-position:center; 
padding:4px;
border:#eceaea 1px solid;
margin:0 auto;
z-index:2;
}

.video-thumb img
{
    z-index:-100;
}

<div class='video-thumb'>
<a href=\"somthing.php\">
<img id='thumb' width=120 height=72 src='http://domain.com/image1.jpg'&gt;&lt;/a&gt;
</div>

Answer 1

This would only be the case if the image was not inside the div. Because the image is inside the div it actually would only have a z-index relative to other elements that are siblings (within the same parent element) to it.

Just adding to the above point, z-index also only applies to elements with display:absolute; applied to them. And even if this was the case, you aren't going to get an image to display behind the background of it's parent element.