Keyframe animation and background-attachment fixed

[ku4ttro]

Hi All,
Hope someone can help me with this:

I’m working on a one page layout site with some keyframe animations and a couple of fixed background images that are overlayd when you scroll down.

Oddly (or not), i can’t manage for the background-attachment:fixed to work with keyframes animations:
http://jsfiddle.net/fpuLR/2/

If i remove the animation, the background-attachment works fine:
http://jsfiddle.net/fpuLR/3/

Any idea why this is happening?

Thanks in advance,
Ku4ttro

[Anonymous]

I’m not sure if i fully understand. Can you explain what your trying to achieve better? and maybe use codepen.

[aco]

Yeah I’m with Jarolin, I don’t really get what your trying to accomplish with this or what you need us to help with. [This](https://css-tricks.com/how-to-ask-a-good-question-in-the-forums/ ) might help you out a little bit.

[ku4ttro]

Hi,
Well, i’m trying to overlay two images, using background-attachment: fixed, like on this example: http://askthecssguy.com/examples/fixedBackgroundImages/example01.html

The problem is that when i add a keyframe animation css on a div in the top, the background-attachemnt:fixed no longer works.

Like on this example: http://jsfiddle.net/fpuLR/2/
(the .mask class has the background-attachment:fixed and the .scaleAnimation has the keyframe animation).

On this example: http://jsfiddle.net/fpuLR/2/ you can see the background-attachment: fixed working (same code, but without keyframe animations).

Hope you understand…

Ku4ttro

[ku4ttro]

Hey,
I’ve solved the problem… It was a damn relative position!
Thanks anyway for your support

[Author]

Posts