Как установить background-img перед img внутри div

Question

У меня есть div, который имеет элемент background-img и img, который находится внутри этого div. Я хочу, чтобы background-img отображался поверх img. Оба изображения позиционируются относительно друг друга. Я знаю, это звучит немного странно, я имею в виду, что это «фон» изображение, но если есть способ сделать это, что действительно поможет мне Это мой код простым способом:

<div id="sample_div"> 
    <img src="path of the image"> 
</div> 

<style> 
    #sample_div{ 
     position: relative; 
     background-img= url(another path); 
    } 
    #sample_div img{ 
     position:relative; 
    } 
</style> 

Подробнее информация об этих изображениях: Фоновое изображение - это пол с размером 1800 * 150, и я хочу показать на нем 2 персонажа. Я хочу выровнять эти 2 изображения так, чтобы они стояли поверх этого изображения на полу, а их ноги немного под верхней поверхностью пола. Мысль это может помочь понять, что я reallt хочу сделать

Answer 1

z-index: 100; 

Z-Index, всегда будет изменить положение вещей, хотите ли вы вещи в передней или задней части. И, конечно, чтобы все вернулось, сделайте это отрицательным числом. Это не должно быть 100, я всегда просто использую большие числа. Надеюсь, что это помогает

Answer 2

Вы можете использовать псевдо-элементы для этого случая:

Демо: http://jsfiddle.net/GCu2D/364/

HMTL:

<div id="sample_div"> 
    <img src="http://www.lorempixel.com/400/200/sports/2" /> 
</div> 

CSS:

#sample_div { 
    position: relative; 
} 
#sample_div:after { 
    position:absolute; 
    content:url(http://www.lorempixel.com/400/200/sports/1); 
    top:0; 
    bottom:0; 
    right:0; 
    left:0; 
    z-index:1; 
} 
#sample_div img { 
    position:relative; 
} 

Answer 3

Вы должны использовать 2 DIV внутри другого для этого и в css использовать

float:left; 

Я думаю, что это сработает для вас.

Answer 4

Не нужно, чтобы переместить его в любом месте, просто скрыть ребенка файл, когда вам нужно:

.hide-inner-contents { 
    background-image:url(src); 
} 
.hide-inner-contents > img{ 
    display:none;  
} 

<div class="hide-inner-contents"><img/></div>