Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Animated gradient background with a fixed background image

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 30, 2016 at 6:37 pm #237521
    ellea
    Participant

    Is it possible to have an animated gradient background along with a fixed background image. I know you can add multiple background images and gradients, but what about animated gradients. I need the gradient to sit behind the image and span the full screen size. Any help would be awesome. Thanks

    January 31, 2016 at 12:07 am #237522
    Atelierbram
    Participant

    Could be fun. Can be any gradient, like also a SVG-gradient? Lots of possibilities, which als depends upon the markup. Why not start making a demo, share the link here, and iterate upon it.

    January 31, 2016 at 5:29 am #237527
    Shikkediel
    Participant

    Not sure it can be achieved with CSS only, the spec says the property isn’t animatable. There’s some fine examples around with JS though.

    One of those

    A workaround by fading in different layers is also an option, this can be done with transitions.

    January 31, 2016 at 8:02 am #237531
    gcyrillus
    Participant

    you may use background-size and background position in order to slide your gradient over the background-image … if that is compatible with effect you look for.
    http://codepen.io/gc-nomade/pen/OMEovK

    January 31, 2016 at 8:21 am #237532
    ellea
    Participant

    Thanks everyone, I can only seem to make it work with including javascript, but as I’m placing it into wordpress finding it a little tricky. The last one with the image works with the multiple background option, only the image is still behind the gradient, not sure how I can get that the other way around.

    January 31, 2016 at 8:35 am #237534
    gcyrillus
    Participant

    declare image first and then gradient in the css rules .

    first image is on top,
    next are under,
    this is why, if you want a background-color, you declare it in the last image

    http://codepen.io/gc-nomade/pen/yeExdX

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.