HELP!! Making the image of section background not move and reveal itself as you scroll down the site with words scrolling over it.

I attached two different websites that achieve what im trying to do. I dont know how to properly explain it but i want the section background to be larger than the section and have the top and bottom secondary sections to reveal the still image background i want it to look like everything is scrolling over the still image. 

the proven results section of this website shows what I'm trying to do--its on the home page https://kumarawilcoxon.com/

this one does it to https://wggcharliedawn.showit.site/

Hi, can you share your website link?  You'll need code specific to your website to target the section you want to have a fixed background and the image you want to have as the background.

There are two ways to do this but to avoid getting messy with z-index values I recommend using background-attachment: fixed in your CSS. But Squarespace background images are actual <img> tags rather than a CSS background-image so it's not straightforward. You need to:

1. Get the Squarespace URL of your background image. You'll need to inspect the code to find it.  It will look something like this: https://images.squarespace-cdn.com/content/v1/670ec384beb20303fec1d294/1712343623550-6Y6LJZAAX5MNZ1Z13C8E/forest.jpg

2. Get the ID of the section you want to have the fixed background. If you want it to appear as you scroll over multiple sections, you'll need the ID of each.

3. Use some custom CSS code like this:

.page-section[data-section-id="YOUR_SECTION_ID"] .section-background {
  background-attachment: fixed;
  background-image: url('YOUR_IMAGE_URL');
  background-size: cover;
  img { display: none }
}

Hope that helps.

Andrew
Square Ace