Locked Background Image CSS code no longer working with Fluid Engine

I've been using this code for quite a while to lock a background image so sections will scroll on top of it:

section[data-section-id="61648de19966687b1e24e7d0"] .section-background {
 position: fixed;
 scale: 100%;
}

But since I've started using the Fluid Engine this code no longer works. (Yet another issue caused by the F.E.)

Anyone have any clues as to why or the solution?

https://pelican-guitar-ewar.squarespace.com/

P: fire

Thanks.

That code seems correct and should work. What section are you wanting it to apply to, I can't see that section ID on the page you shared?

I'm wanting to lock the background image on the first "home" section (the mountains).

I think this is the proper section:

The section ID for that part of the website is:

section[data-section-id="63e2f8ca06e7cd325235639d"]

So you may need to update your CSS to this:

section[data-section-id="63e2f8ca06e7cd325235639d"] .section-background {
 position: fixed;
 scale: 100%;
}

Thanks iamDaveHart!  The dividers were the problem.  I guess I have to pick between the two...locked BG or dividers.  

 not necessarily. the other thing you could try is to stop the z-index transformation. I would caveat that by saying that this is - i think - a relatively new feature and so the code might change. Squarespace can of course change how the site is rendered at any time... might work though. add this to your css

article section:nth-child(1).has-section-divider .section-border {
    transform: unset !important;
}

this will sort out the transition on the first section in the page. should be ok.

Frustrating we can't have both.  It's kind of like the new way they handle images in Fluid.  Now we can position them more easily, but the animations are gone.

That addition let me enable the divider and lock the BG!

 
So thankful for people like you who understand CSS waaaay better than me!