Background image parallax with background-attachment: fixed no longer working

[samuraicow]

Adding this element CSS to a section with a parallax background image no longer seems to have the desired effect:
$el .x-bg-layer-lower-image { background-attachment: fixed; }

The background image is still scrolling up with the page rather than staying in a fixed position… I think maybe because the old parallax used to modify the background-position property, whereas the newer one uses transform: translate3D().

[tristup]

Hi @samuraicow,

Thanks for reaching out.
It seems that you have enabled the Parallax option for the Background Layers > Lower which is the reason behind it. I would suggest you disable it and check if that works for you.

Thanks

[samuraicow]

Thanks, @tristup, but per my original post, I’m hoping to have BOTH parallax AND fixed positioning set on the element. As you can see from the other sections below it (which use the legacy section element), it used to work fine to have both properties set. background-attachment: fixed; was default within the integrity-light.css for parallax bg images:
.x-section.bg-image.parallax, .x-section.bg-pattern.parallax { background-attachment: fixed;}

Now that parallax uses translate3D instead of background-position for parallax movement, however, this rule seems to no longer work.

[ruenel]

Hello @samuraicow,

The parallax effect of the legacy Section elements has a different element structure compared to the new one. They also have a different way of showcasing the parallax effects. This is why adding background-attachment: fixed; has a different or no effect at all in the new Section element. Be advised that we have built this on purpose. You will just have to choose which one you will use. Anyways, you can use the Classic Section element and insert newer elements on it though.

Hope this helps.

[samuraicow]

Bummer! I’ll continue using the Classic Section then, as that particular parallax look works best for my current design. Is there an easy way to add a Classic Section to a new document in Cornerstone? I didn’t see an option to do so.

Thanks for the help.

[ruenel]

Hey @samuraicow,

Yes, there is. While you are in the builder, make sure that you are on the “Outline” tab.

Hitting the Command key in Mac or Windows key in Windows will change the “Add Section” into “Add Classic Section”

Best Regards.