Scrolling text over a fixed background within a section

Site URL: https://www.purehomeoffice.com/aspire-1

Heya

I'd like to create a section with a fixed height of the window / media screen that scrolls through all the available text / content before proceeding to the next section.

I found this bit of code that I believe will do what I want, but I don't know exactly how to implement it.

https://codepen.io/aakhya/pen/QJWovp

I attached a video to show what I'd like to achieve.

Using 7.1, btw.

Are you trying to do it to all of the sections?

Try adding this to design -> custom CSS

.section-background {
    position: fixed !important;
    left:unset !important;
}

Can't believe it was that easy. That did the job marvelously. Thank you!

Guess I spoke too soon.

I tried to add another section further down the page and the image from that section takes over all the way back to the top.

Remove the code from above and give this a try:

.section-background img {
    position: fixed !important;
}

That sort of fixed it. It's not taking up the rest of the page now, but now the second section's background image doesn't display.

You could set the background of the div manually to the URL of the image, and then hide the image tag. That's what they did in the link you posted.  You would need to manually do it for each section.

[data-section-id="5f0756efed03a802582b95aa"] .section-background img {
  display:none;
}

[data-section-id="5f0756efed03a802582b95aa"] .section-background {
  background: url('https://images.squarespace-cdn.com/content/v1/5ee0ee00a0a12e14f700c502/1594316294831-H3VJXJTZAZNJI3G2QK5N/ke17ZwdGBToddI8pDm48kBQ_OmUn0XNjqwyBYOIFwXV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0p5uBJOnOmCWBN4JfYsIDyRB3ELHLLET9s1anQygWAMDSh6zbPa8Vo37A4r2-aOSIQ/IMG_1660.jpeg?format=2500w');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

Not sure if you ever got this figured out.

I just changed the "left" in the code to "center" and it works out.

.section-background {
    position: fixed !important;
    center:unset !important;
}

Hi everyone,

Has anyone figured out the full code needed to have one specific section's background fixed while scrolling?

The tutorials I found refer to Squarespace 7.0 or are intended to apply to all pages rather than single sections.

Thanks in advance for any suggestions!

22 hours ago, verticalberto said:

Hi everyone,

Has anyone figured out the full code needed to have one specific section's background fixed while scrolling?

The tutorials I found refer to Squarespace 7.0 or are intended to apply to all pages rather than single sections.

Thanks in advance for any suggestions!

You can try rwp comment above, it should work. If it doesn't work, please share link to your site, we can check easier

On 8/15/2023 at 12:15 PM, tuanphan said:

You can try rwp comment above, it should work. If it doesn't work, please share link to your site, we can check easier

Thank you Tuanphan for your reply! I have tried rwp's suggestion but it's not working 😞

This is the test page i'm trying to make it work on (middle section)

https://cluego-test-version.squarespace.com/test

password: test

On 8/17/2023 at 12:11 AM, verticalberto said:

Thank you Tuanphan for your reply! I have tried rwp's suggestion but it's not working 😞

This is the test page i'm trying to make it work on (middle section)

https://cluego-test-version.squarespace.com/test

password: test

You mean section with 3 people?

54 minutes ago, tuanphan said:

You mean section with 3 people?

Yes sir

On 8/19/2023 at 3:18 PM, verticalberto said:

Yes sir

Sorry, I forgot, background-attachment: fixed won't work on mobile (or doesn't work on iOS only). You can consider adding code for desktop, then disable it on mobile. What do you think?

5 hours ago, tuanphan said:

Sorry, I forgot, background-attachment: fixed won't work on mobile (or doesn't work on iOS only). You can consider adding code for desktop, then disable it on mobile. What do you think?

Sure I don't mind if it works on desktop only. The mobile version of the website is always less interesting anyways 🙂

On 8/21/2023 at 10:04 PM, verticalberto said:

Sure I don't mind if it works on desktop only. The mobile version of the website is always less interesting anyways 🙂

Change rwp code to this to force it run on desktop only, replace with your data section id & image url

@media screen and (min-width:768px) {
[data-section-id="5f0756efed03a802582b95aa"] .section-background img {
  display:none;
}

[data-section-id="5f0756efed03a802582b95aa"] .section-background {
  background: url('https://images.squarespace-cdn.com/content/v1/5ee0ee00a0a12e14f700c502/1594316294831-H3VJXJTZAZNJI3G2QK5N/ke17ZwdGBToddI8pDm48kBQ_OmUn0XNjqwyBYOIFwXV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0p5uBJOnOmCWBN4JfYsIDyRB3ELHLLET9s1anQygWAMDSh6zbPa8Vo37A4r2-aOSIQ/IMG_1660.jpeg?format=2500w');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
}

Use this tool to find data section id https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

6 hours ago, tuanphan said:

Change rwp code to this to force it run on desktop only, replace with your data section id & image url

@media screen and (min-width:768px) {
[data-section-id="5f0756efed03a802582b95aa"] .section-background img {
  display:none;
}

[data-section-id="5f0756efed03a802582b95aa"] .section-background {
  background: url('https://images.squarespace-cdn.com/content/v1/5ee0ee00a0a12e14f700c502/1594316294831-H3VJXJTZAZNJI3G2QK5N/ke17ZwdGBToddI8pDm48kBQ_OmUn0XNjqwyBYOIFwXV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0p5uBJOnOmCWBN4JfYsIDyRB3ELHLLET9s1anQygWAMDSh6zbPa8Vo37A4r2-aOSIQ/IMG_1660.jpeg?format=2500w');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
}

Use this tool to find data section id https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

Uhm, I'm trying to make it work adding the code to custom CSS with picture URL and section ID but it doesn't seem to do anything on dekstop preview. I got section ID from the extension you recommended.
 

@media screen and (min-width:768px) {
[data-section-id="64dd288c79c102293fd331b7"] .section-background img {
  display:none;
}

[data-section-id="64dd288c79c102293fd331b7"] .section-background {
  background: url('https://images.squarespace-cdn.com/content/v1/64d13969e151e619dd0c776c/7a3dd884-9ff7-4fc4-a71c-febc03b330c5/pexels-keira-burton-6146931.jpg?format=2500w');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
}

What am I doing wrong? 😕

On 8/23/2023 at 10:12 PM, verticalberto said:

Uhm, I'm trying to make it work adding the code to custom CSS with picture URL and section ID but it doesn't seem to do anything on dekstop preview. I got section ID from the extension you recommended.
 

@media screen and (min-width:768px) {
[data-section-id="64dd288c79c102293fd331b7"] .section-background img {
  display:none;
}

[data-section-id="64dd288c79c102293fd331b7"] .section-background {
  background: url('https://images.squarespace-cdn.com/content/v1/64d13969e151e619dd0c776c/7a3dd884-9ff7-4fc4-a71c-febc03b330c5/pexels-keira-burton-6146931.jpg?format=2500w');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
}

What am I doing wrong? 😕

You missing a !important text. Use this new code

@media screen and (min-width:768px) {
[data-section-id="64dd288c79c102293fd331b7"] .section-background img {
    display: none !important;
}
[data-section-id="64dd288c79c102293fd331b7"] .section-background {
    background: url('https://images.squarespace-cdn.com/content/v1/64d13969e151e619dd0c776c/7a3dd884-9ff7-4fc4-a71c-febc03b330c5/pexels-keira-burton-6146931.jpg?format=2500w');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}}

8 hours ago, tuanphan said:

You missing a !important text. Use this new code

@media screen and (min-width:768px) {
[data-section-id="64dd288c79c102293fd331b7"] .section-background img {
    display: none !important;
}
[data-section-id="64dd288c79c102293fd331b7"] .section-background {
    background: url('https://images.squarespace-cdn.com/content/v1/64d13969e151e619dd0c776c/7a3dd884-9ff7-4fc4-a71c-febc03b330c5/pexels-keira-burton-6146931.jpg?format=2500w');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}}

 

Sir you have my undying gratitude. After days of research this was the only way I could make it work! 
Thanks a ton for your contribution to this communnity 🙏

Hii!  This works so great for me as well!! Thank youuu - wondering if there is a way to have those static background images as videos? @tuanphan

On 9/6/2023 at 11:46 PM, GPGDesigns said:

Hii!  This works so great for me as well!! Thank youuu - wondering if there is a way to have those static background images as videos? @tuanphan

With video, I think you can try this (with Classic Editor section)

https://stnsvn.com/blog/how-to-add-parallax-scrolling-squarespace-7-1