Infinite Scrolling Background Image extends the page width. How do I fix this

I am trying to build a page where I need to create a Infinite Scrolling Background Image where the image is looped to create an infinite effect. And over the image a card shows the content appearing over the background. The image overflows the page width on smaller screens and ends up leaving huge space horizontally and messes up the layout.

Here is the React Code:

"use client";
import React from "react";

import { Button } from "./ui/button";
import Link from "next/link";
import Image from "next/image";

import { useMedia } from "react-use";

const Landing = () => {
  const isMobile = useMedia("(max-width: 576px)", false);
  const isTablet = useMedia(
    "(min-width: 577px) and (max-width: 1023px)",
    false
  );
  const isDesktop = useMedia("(min-width: 1024px)", false);


  let height = 40;
  let width = 40;
  if (isMobile) {
    height = 20;
    width = 200;
  } else if (isTablet) {
    height = 300;
    width = 300;
  } else if (isDesktop) {
    height = 300;
    width = 300;
  }

  return (
    <div className="h-[90vh] flex flex-col justify-center items-center overflow-hidden">
      <div className="infinite-scrolling absolute"></div>
      <div className="flex flex-col items-center text-center gap-8 glassy border-outline rounded-lg py-8 px-6 w-[90vw] sm:w-full z-40">
        <div className="flex flex-col items-center gap-4">
          <h1 className="font-bold text-3xl tracking-tighter md:text-5xl">
            My CLUB
          </h1>
          <h2 className="font-bold text-3xl tracking-tight text-blue-600 md:text-4xl">
            XYZ
          </h2>
        </div>
        <h3 className="font-semibold text-xl tracking-tighter text-rose-600 md:text-3xl">
          ABC
        </h3>
        <div className="w-full flex justify-center items-center">
          <Image
            src="/banner.png"
            alt="logo"
            width={width}
            height={height}
          />
        </div>
        <div>
          <Irrelevant/>
        </div>
      </div>
    </div>
  );
};


export default Landing;

And here is the CSS used:

.infinite-scrolling {
  background: url("../public/background_large.jpg") repeat-x;
  height: 100vh;
  width: 5076px;
  animation: slide 60s linear infinite;
  filter: grayscale(80%);
}

.glassy {
  background: rgba(27, 26, 85, 0.35);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-1920px, 0, 0); /* The image width */
  }
}

Code demo link: codesandbox

I want the image to be looped in the background essentially creating an infinite scrolling effect. This code expands the page horizontally on smaller screens, which can be scrolled. How do I prevent this from happening?

Any help would be great. And if there's a package for this kinda stuff, it'd be awesome. Thanks.

You want to animate the background-position, not the container of the image. Then you do not have to deal with the size of the container and its overflowing on the smaller screens.

Here is the CSS that might help you

.infinite-scrolling {
  background: url("https://fastly.picsum.photos/id/641/200/200.jpg?hmac=9pd71nRRRsT7TXf0zn0hQ6tW6VQnQ-UtL1JXDhJZB8E")
    repeat-x;
  background-size: auto 100%; /* Scale the image to fit the height */
  height: 200px; /* height of the image */
  width: 100%; /* full width of the container */
  animation: slide 1s linear infinite; /* Adjust duration for smoothness */
  filter: grayscale(80%);
  top: 0;
}

@keyframes slide {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -200px 0;
  }
}

.glassy {
  background: rgba(27, 26, 85, 0.35);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

Here is the sandbox and preview