Как настроить фоновое изображение для отображения перед содержимым тега img?

Question

У меня есть div и внутри я помещаю изображение, используя тег img

и в таблице стилей я использовал фоновое изображение для этого div и выравнивая его центр по значению z-index 1 ..

И я использую другой стиль для img внутри этого div со значением z-index -100

Так что я ожидаю, что фоновое изображение появится перед изображением ..

Я думаю, что делаю что-то не так

Мой код

.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'></a>
</div>

Answer 1

Это было бы только в том случае, если изображение не было внутри div. Поскольку изображение находится внутри div, оно фактически будет иметь z-индекс только относительно других элементов, которые являются родственными элементами (в пределах того же родительского элемента).

Просто добавив к вышеуказанной точке, z-index также применяется только к элементам с отображением: absolute; применяется к ним. И даже если бы это было так, вы не получите изображение для отображения за фоном его родительского элемента.