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;
}