I’m implementing a parallax effect on my website where the background image changes based on the scroll position. The background image is supposed to stay fixed horizontally and change only vertically as the user scrolls. However, I’m encountering an issue where the background image moves sideways (horizontally) when I scroll up.

Here’s a summary of my setup:

I’m using React and CSS to manage the background image.
The background image changes based on the scroll position.
The image should stay fixed horizontally and only change vertically.
Here’s the relevant code:

import React, { useEffect, useState } from 'react';
import '../index.css';

const Layout = ({ children }) => {
  const [bgImage, setBgImage] = useState("url('Dobra1.webp')");
  const [prevBgImage, setPrevBgImage] = useState("");
  const [fade, setFade] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const images = ["Dobra1.webp", "Dobra2.webp", "Dobra3.webp"];
    let loadedImagesCount = 0;

    const handleImageLoad = () => {
      loadedImagesCount += 1;
      if (loadedImagesCount === images.length) {
        setLoading(false);
      }
    };

    images.forEach(src => {
      const img = new Image();
      img.src = src;
      img.onload = handleImageLoad;
    });
  }, []);

  useEffect(() => {
    const handleScroll = () => {
      const scrollPosition = window.scrollY;

      if (scrollPosition < window.innerHeight * 2.25) {
        setBgImage("url('Dobra1.webp')");
      } else if (scrollPosition < window.innerHeight * 5) {
        setBgImage("url('Dobra2.webp')");
      } else {
        setBgImage("url('Dobra3.webp')");
      }
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  useEffect(() => {
    if (bgImage !== prevBgImage) {
      setFade(true);
      setPrevBgImage(bgImage);
      const timer = setTimeout(() => setFade(false), 1000); // Tempo da transição
      return () => clearTimeout(timer);
    }
  }, [bgImage, prevBgImage]);

  return (
    <div>
      <style>
        {`
          .loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.75);
            color: white;
            z-index: 9999;
          }

          .background-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            z-index: -1;
            transition: opacity 1s ease-in-out;
            opacity: 1;
          }

          .background-overlay.fade {
            opacity: 0;
          }

          @media (max-width: 768px) {
            .background-overlay {
              background-size: cover;
              background-position: center;
              background-attachment: scroll;
            }
          }
        `}
      </style>
      {loading && (
        <div className="loader">
          Carregando...
        </div>
      )}
      {!loading && (
        <>
          <div className={`background-overlay ${fade ? 'fade' : ''}`} style={{ backgroundImage: prevBgImage }}></div>
          <div className="background-overlay" style={{ backgroundImage: bgImage }}></div>
          {children}
        </>
      )}
    </div>
  );
};

export default Layout;

When I scroll up, the background image shifts slightly to the left. I need the image to stay fixed horizontally and only change vertically as I scroll. How can I fix this issue so the background image doesn’t move sideways when scrolling?

Any help would be greatly appreciated!