Image blocks in background?

I have two image blocks with full bleed that are between three text blocks. The section ID's for the image blocks are:

section[data-section-id="6621a4dd4235ac53281adec8"]

section[data-section-id="66219f22e4cf963ce6a57165"]

I purposely set the height of the image blocks to 20. I want these images fixed to the background so when you scroll down the page, it revels the entire image (within the 20 height) as the text blocks are scrolling up over them. I previously achieved this using the below code in my site's code footer injector, but it no longer works:

*/
.page-section.has-background {
  .section-background {
    background-size: cover;
    background-position: center center;

    @media (min-width: 1000px) {
      background-attachment: fixed;

      img {
        display: none !important;
      }
    }
  }
}

Is there a better code that I can use? I want this applied to the one page only. Here is the page:

https://www.lucasano.com/about

Thank you!

Hi

Your code is LESS, you need to add it to Custom CSS box (Website > Website Tools > Custom CSS)

To make it works on one page, you can add ID before and add to CSS box

body#collection-661ff5f23530a524bd48c032 {
.page-section.has-background {
  .section-background {
    background-size: cover;
    background-position: center center;

    @media (min-width: 1000px) {
      background-attachment: fixed;

      img {
        display: none !important;
      }
    }
  }
}}

Thank you for the code. I added it but it turned the the image sections white:

https://www.lucasano.com/about

I was able to find code that worked. I added this code for each section:

body section[data-section-id="66219f22e4cf963ce6a57165"] .section-background img {
  display:none;
}

body section[data-section-id="66219f22e4cf963ce6a57165"] .section-background {
  background: url('https://static1.squarespace.com/static/660dabf2c74e425529726520/t/66243b33e50095191ec2b84f/1713650490415/Sample+image+2.jpeg');
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
}

Bumping this back up.

The code above is working on desktop. It's also working on the mobile preview in Squarespace but it's not actually working when I check on my iPhone. I've seen it work on other sites on my mobile so hoping I can adjust the code for it actually work on mobile.

Below again is the code I am using:

===================================
   "ABOUT" FIXED BACKGROUND #2
===================================
*/
section[data-section-id="6621a4dd4235ac53281adec8"] .section-background img {
  display:none;
}
section[data-section-id="6621a4dd4235ac53281adec8"] .section-background {
  background: url('https://static1.squarespace.com/static/660dabf2c74e425529726520/t/66224c02f2c52e7dcf15a37f/1713523717231/Sample+image+3.jpg');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
/*

Note: background-attachment: fixed won't work on iOS, I don't see a way to fix this.