React Parallax wont load Image

Question

I'm trying to replicate this Parallax effect Here and it doesn't seem to load my image. I am using the React Scroll Parallax Here but I can't figure out why my image isn't loading.

Here is my code:

import water from "../ParallaxImg/water.avif";

function RecentWork() {
  return (
    <div>
      <ParallaxProvider>
          <Parallax strength={800} style={{
            backgroundImage: {water},
            //backgroundImage: "../ParallaxImg/water.avif",
            position: "relative",
            height: "20vh"
          }}>
            <div className="content" style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              position: "relative",
              height: "100vh",
              width: "100vw"
            }}>
              <span className="img-text">Text here</span>
            </div>
          </Parallax>
    ...

Here is a screenshot of what I'm seeing. It should be in between the picture of me and the text "My Recent Work"

Here is my Github repo of the project.

Thanks in advance for your help!

Answer 1

This is what you need to do:

import { ParallaxProvider } from 'react-scroll-parallax';

import { ParallaxBanner } from 'react-scroll-parallax';

import water from "../ParallaxImg/water.avif"; 

           <ParallaxProvider>
              <ParallaxBanner
                strength={800}
                layers={[{ image: water, speed: -15 }]}
              ></ParallaxBanner>
            </ParallaxProvider>

Parallax banner has a layers attribute of which you could add your images there.

Read more here: https://react-scroll-parallax.damnthat.tv/docs/examples/banners