Help with CSS backgrounds, floating BG parallax effect, BG Breaks Site!! :)

I want to use CSS code to create floating fixed backgrounds like on this website https://briankesinger.com
Like a parallax effect where the content floats over top of the backgrounds.

Here is a test page I setup
https://creativejourney.life/test125

site pass: nga2023
 

Here is the my CSS code that I used so far, however when I try to use more than one background with the effect it breaks the page. I am only able to get one background to function not multiple backgrounds like the page above. Additionally I loose my footer as well, which totally disappears.

//-- Fixed BG Page Test mountains --//
section[data-section-id="632a686e08fe477e2b4ad9d8"]
{
  .section-background {
  background-repeat: no-repeat;
  position: fixed;
  z-index: 0;
  }
}

Any help would be awesome. I really like the look and want to get this to work.
thanks 🙂

That worked thanks, now there is still the issue of my footer disappearing on pages that use this effect, is there a way to get that back?

On 11/22/2023 at 5:28 PM, PlasticArcade said:

That worked thanks, now there is still the issue of my footer disappearing on pages that use this effect, is there a way to get that back?

What is problem with footer? It already shows to me

2 hours ago, tuanphan said:

What is problem with footer? It already shows to me

it should have a footer with page info on each page like this one... it shows up fine if I remove the CSS for the parallax BG's, however if I use that feature it disappears and just shows the image you posted above.

Add this CSS code

footer#footer-sections {
    z-index: 99999999 !important;
}

On 11/22/2023 at 10:51 AM, tuanphan said:

Try this CSS code (for Parallax effect section 2)

[data-section-id="655b0c5f9c28a22da5007305"] {
img {
    visibility: hidden;
}
.section-background {
    background-color: transparent !important;
}
.section-border {
    background-image: url(https://images.squarespace-cdn.com/content/v1/61a2e58f1fd4bc35a51bcb19/1700465777444-YCNPKRVIN0HYQ6D8N157/image-asset.jpeg);
    background-attachment: fixed;
}}

 

To disable on mobile, change the current code to this code

@media screen and (min-width:768px) {
  [data-section-id="655b0c5f9c28a22da5007305"] {
  img {
      visibility: hidden;
  }
  .section-background {
      background-color: transparent !important;
  }
  .section-border {
      background-image: url(https://images.squarespace-cdn.com/content/v1/61a2e58f1fd4bc35a51bcb19/1700465777444-YCNPKRVIN0HYQ6D8N157/image-asset.jpeg);
      background-attachment: fixed;
  }}
}

Do i just put this parallax code into the "Custom CSS" under "Website Tools" ? I did that, but nothing changed.

On 10/10/2024 at 4:16 AM, allieguerin12 said:

Do i just put this parallax code into the "Custom CSS" under "Website Tools" ? I did that, but nothing changed.

You need to adjust this ID.

If you don't know to change ID, you can share link to page & let me know which section you want to apply Parallax, I can help you easier