jQuery overlapping images during transition (tryin

Question

I'm trying to make a background transition between images, but I have this problem, the image appears to be on top on everything during the transition, and covers the fields and buttons. Then it goes behind them again.

I have a div with negative margin (the background one) before the real content like this:

<div id="background">
</div>
<div id="realcontent">
</div>  

You can see it on this jfiddle

http://jsfiddle.net/k9e5f/2/

If I put everything inside the same div and change the opacity, the buttons and fields are faded too, I don't want that.

I tried setting z-indexes but nothing works.

Is there a way to keep the fading image on bottom of the other content during the transition?

Why does this happen??!!

Is there a better way of doing this, without using a plugin? (this is simple, I don't want to make another http request on my server only for this)

Thanks for any help

Answer 1

Note that in order for z-index property to work, you must set the position too on the elements:

position: relative; or

position: absolute; or

position: fixed;

Just add position: relative; to the #home_background element in the CSS and it should work fine.