How to properly set a fixed background while scrolling?

Question

So I have the following PageLayout.jsx which I use to set the layout for all of my pages:

   export function PageLayout({ children }) {
      return (
        
          

          {children}
          
          
        
      );
    }

I want the background to be a fixed image, but to NOT move as the user scrolls (when the page becomes scrollable). In other words, I want only the elements within the page appearing as if they are scrolling.

The image does appear fixed, however, as you scroll, the image is then cut off as it extends past the height of the initial page. I understand this has to do with the fact that my children component overflows the parent div shown in the code. However, I cannot simply set "Overflow: auto", because for whatever reason that causes the browser scroll bar to disappear behind my "fixed: top" navigation bar. Any ideas on what is the proper way of setting a fixed background image?

Vitor Figueredo Marques · Answer

Here you just need to have a another container that match the width and height of the one that has the image but has overflow-y: scroll

body {
        margin: 0;
      }
      .background {
        height: 100vh;
        width: 100vw;
        background-image: url("https://lh3.googleusercontent.com/2hDpuTi-0AMKvoZJGd-yKWvK4tKdQr_kLIpB_qSeMau2TNGCNidAosMEvrEXFO9G6tmlFlPQplpwiqirgrIPWnCKMvElaYgI-HiVvXc=w600");
        background-size: "cover";
        background-clip: fixed;
      }

      .container {
        height: 100%;
        width: 100%;
        overflow-y: scroll;
      }

      .thing {
        height: 33%;
        background-color: rgba(0, 0, 255, 0.288);
      }

       .navbar {
        position: sticky;
        width: 100%;
        height: 3rem;
        top: 0;
        background-color: rgba(255, 0, 0, 0.815);
      }


      
        My NavBar
        Thing 1
        Thing 2
        Thing 3
        Thing 4
        Thing 5
        Thing 6

How to properly set a fixed background while scrolling?

1 Answers