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