Parallax effect with image not moving

Hi, I am looking to create the effect similar to the opening banner here: https://www.casareia.com/. 

No website to show you in particular, I want the effect on several of my websites.

I have used the following code to make the section sticky: 

@media screen and (min-width: 768px) {
section[data-section-id=""] {
position: sticky!important; 
top: 0px!important
} 
html {
scroll-behavior: smooth
} 
  } 

However, with it, the text on the slide becomes sticky as well, whereas I only want the background sticky, not the text on the background. Is there any way to customise this? 

You haven't entered id yet

section[data-section-id=""]

Use this tool to find data section id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

On 3/19/2023 at 2:11 PM, tuanphan said:

You haven't entered id yet

section[data-section-id=""]

Use this tool to find data section id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

I have just taken it out to post in this forum... 😉

On 3/19/2023 at 4:41 AM, tuanphan said:

You haven't entered id yet

section[data-section-id=""]

Use this tool to find data section id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

hey tuanphan, I implemented this on my website: https://violin-aqua-9h9p.squarespace.com/
password: HELPME

I was wondering if Im able to consolidate the code in the custom css section. I implemented sticky parallax to my entire homepage and it came out to around 60 lines of code. Im sure Ill be able to add the section id somewhere in one block of code but i have no idea where.

Thank you!

9 hours ago, pietro445 said:

hey tuanphan, I implemented this on my website: https://violin-aqua-9h9p.squarespace.com/
password: HELPME

I was wondering if Im able to consolidate the code in the custom css section. I implemented sticky parallax to my entire homepage and it came out to around 60 lines of code. Im sure Ill be able to add the section id somewhere in one block of code but i have no idea where.

Thank you!

What is your problem?

3 hours ago, tuanphan said:

What is your problem?

I just want to know if there's a way of combining this code. For example,
Here is the code for making a section position sticky, I included two sections out of the seven that I used on my homepage.

@media screen and (min-width: 0px) {
section[data-section-id="642dbb1f86b2a117d2043598"] {
position: sticky!important; 
top: 0px!important
} 
html {
scroll-behavior: auto
} 
  }

@media screen and (min-width: 0px) {
section[data-section-id="643b0d6f597bb324b62f8b93"] {
position: sticky!important; 
top: 0px!important
} 
html {
scroll-behavior: auto
} 
  }

Would it be possible to combine them somehow so that I won't have to use as much code?
something like this for example:
 

@media screen and (min-width: 0px) {
section[data-section-id="642dbb1f86b2a117d2043598"] & section[data-section-id="643b0d6f597bb324b62f8b93"] {
position: sticky!important; 
top: 0px!important
} 
html {
scroll-behavior: auto
} 
  }

You can change to this shorter code

section[data-section-id="642dbb1f86b2a117d2043598"], section[data-section-id="643b0d6f597bb324b62f8b93"]  {
  position: sticky !important; 
  top: 0px !important;
} 
html {
scroll-behavior: auto
}