如何在div内的img前面放置background-img

Question

I have a div which has a background-img and and img element that is inside this div. I want the background-img to be shown on top of the img. Both images are positioned relative. I know this sounds a little weird, I mean this is a "background" image, but if there is any way for doing this that would really help me This is my code in a simple way:

<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>

More info about these images: The background image is a floor with the 1800*150 dimension and I want to show 2 characters standing on top of it. I want to align these 2 images in a way that they stand on top of this floor image and their feet go a little under the top surface of the floor. Thought this might help to figure out what I reallt want to do

Answer 1

z-index: 100;

Z-Index, will always reposition of things, whether you want things in front or the back. And of course, to make things go back, make it a negative number. It dont have to be 100, I always just use larger numbers. Hope this helps

Answer 2

You can use pseudo elements for this case:

Demo: 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

Don't need to move it anywhere, just hide the child image when you need to:

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

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