How can I move an img under background

Question

I have this code:

<img src="<?php echo get_template_directory_uri() ?>/img/loader.gif" alt="<?php echo ANSIMUZ_THEME; ?>" />

How can I move loader.gif under main background? (so it will show up before main background and hides when background is loaded) main background is somewhere maybe here:

$('#home-title').backstretch([
myJsVars.front_background1

I dont really know java

Answer 1

You can probably use pure css z-index to set the hierarchy. Make sure the loader image has a lower z-index than #home-title. Like this:

#home-title {
    position: relative;
    z-index: 2;
}

img#loader {
    position: relative;
    z-index: 1;
}

Don't forget add the id attribute id="loader" on your loader image element.

Answer 2

try this ...may be help ful to you

$(window).load(function() {
    $('.image_loader').fadeOut(2000);
});

.main{
 position:relative;
}
.image_loader{
 position:absolute;
 z-index:10;
 top:0;
 left:0;
 width:100px;
}
.background_image{
 
 z-index:1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
 <img class="background_image" src="http://placehold.it/700" alt="background" />
 <img class="image_loader" src="http://oi57.tinypic.com/2rww2gz.jpg" alt="loader" />
    
</div>