Safari (non-mobile) relative positioning and fixed background.

[dhechler]

So I am completely stuck. I have text in a div that scrolls until it hits the top of the screen. At the top of the screen my javascript adds a class of “fixed” which makes the background image fixed”. This all works very well in every browser except Desktop Safari. In Safari, any div with a relative position and a fixed background makes the background disappear.

I would just remove the position: relative; but i need that for the z-index to make the next div come in front of the previous div.

Heres an example of my code

and my css is

#div1, #div2, #div3 { position: relative; } /* this is for the z-index */

#div1 { z-index: 1; background: url(i/bg.jpg) no-repeat fixed; }

#div2 { z-index: 2; background: url(i/bg2.jpg) no-repeat fixed; }

#div3 { z-index: 3 background: url(i/bg3.jpg) no-repeat fixed; }

Any help would be awesome.

[Author]

Posts