Grow your CSS skills. Land your dream job.

Keyframe animation and background-attachment fixed

  • # April 26, 2013 at 2:58 pm

    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

    # April 26, 2013 at 4:02 pm

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

    aco
    # April 26, 2013 at 4:59 pm

    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](http://css-tricks.com/how-to-ask-a-good-question-in-the-forums/ ) might help you out a little bit.

    # April 29, 2013 at 2:49 pm

    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

    # April 30, 2013 at 6:29 am

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".