fixed position z-index does not work in Chrome

[majidkhan]

Hello everyone!

I have read a number of forums but could not solve this problem. I have a fixed navigation with 2 background images. One with png image and one with blue background. I want the blue image to appear when a Big Header image/slideshow ends after user scrolling. [Here is the demo.](http://jsfiddle.net/Cc8yf/ “Demo”)
The demo works in all the browsers except Chrome Version 28.0.1500.72 m

I appreciate your answers. Thanks!

[Paulie_D]

Something is definitely working in **my** Chrome 28 but I have no idea if it’s actually what is supposed to be happening as it’s unclear from your post.

You want to have one bg image at one point and another after a certain amount of scrolling…is that it?

Javascript to the rescue.

Oh…and z-index doesn’t work on bg images only HTML elements.

[majidkhan]

@Paulie, Thanks for your quick response. If you open the demo in Firefox and Chrome then you will see the difference. In Firefox the menu and the the png image are above the big Header image. And the blue image is behind the big Header image. But this is not the case in Chrome. I want the same flow as in firefox. Does that work for you in your chrome?

[Paulie_D]

I don’t have FF on my current machine so I can’t check at the moment but I’m still confused as to what it is you are trying to achieve.

[amoss]

http://codepen.io/anon/full/iKljy

[majidkhan]

I have a background png behind the navigation which will appear on the big Header image. If I don’t use the blue backgound behind the navigation then a user cannot read menu when there is not big Header image.

But in your previous comment you said [Oh…and z-index doesn’t work on bg images only HTML elements.].
Then I applied the z-index on an image element. Now it is working fine.
Very very thanks Paulie.

[majidkhan]

@Amoss, very Thanks! You solution also works.

[Author]

Posts