CSS: before z-index is not working properly [duplicate]

This question already has an answer here:

• z-index of :before or :after to be below the element, Is that possible? 5 answers

My goal is to make a process gif image appear inside a div until the picture is fully loaded.

Everything working perfectly instead of the z-index that I use :before the div.

I want the process gif would be behind the picture (iow invisible when picture is fully loaded) and not on top of the loaded picture.

Here is the jsFiddle:

http://ift.tt/1M3MdxA

The HTML :

<div id="gangina">
</div>

The CSS :

#gangina
{
    background:url('http://ift.tt/1BE7QDE');
    background-repeat:no-repeat;
    border:1px black solid;
    height:350px;
    margin:0 auto;
    position:relative;
    width:350px;
    z-index:1;
}

#gangina:before
{
    content:"";
    display:block;
    width:32px;
    height:32px;
    background:url('http://ift.tt/1M3MdxC');
    background-repeat:no-repeat;
    border:0;
    margin:10px auto;
    z-index:0;
}