How to add background behind the three.js model in html for a section?

Question

I want to move background behind the model covering the whole section.

I have created a stackblitz sandbox [https://stackblitz.com/edit/sb1-el22jkdo?file=src%2FApp.tsx] for my project so that it is easy to understand the problem.

//App.tsx
import { Canvas } from '@react-three/fiber';
import { ScrollControls, Scroll } from '@react-three/drei';
import { Scene } from './components/Scene';
import { ScrollContainer } from './components/ScrollContainer';

function App() {
  return (
    <div className="w-full h-screen bg-gray-900">
      <Canvas
        camera={{ position: [0, 0, 5], fov: 75 }}
        className="w-full h-full"
      >
        <ScrollControls pages={3} damping={0.1}>
          <ambientLight intensity={0.5} />
          <pointLight position={[10, 10, 10]} />
          <Scene />
          <Scroll html>
            <ScrollContainer>
              <div className="absolute inset-0 pointer-events-none" />
            </ScrollContainer>
          </Scroll>
        </ScrollControls>
      </Canvas>
    </div>
  );
}

export default App;

//ScrollContainer.tsx
import React from 'react';
import { ScrollSection } from './ScrollSection';

interface ScrollContainerProps {
  children: React.ReactNode;
}

export function ScrollContainer({ children }: ScrollContainerProps) {
  return (
    <div className="h-[300vh]">
      <div className="sticky top-0 h-screen">
        {children}
      </div>
      <div className="px-4 py-8 space-y-96">
        <ScrollSection 
          title="Dynamic Movement"
          description="Watch as the object flows smoothly from side to side as you scroll."
        />
        <ScrollSection 
          title="Fluid Animation"
          description="The object dances through space with synchronized rotations and movements."
        />

       {/* I want to add image background behind the model but text in front of model only for this section*/}
        <ScrollSection 
          title="Color Transitions"
          description="Experience smooth color transitions as the object moves through its path."
          variant="with-background"
        />
      </div>
    </div>
  );
}

Fuild animation text is correct as it is front the model. But last text and background of text should be behind the model. Basically I don't want I want some DOM elements infront of model and some DOM behind the model. So far DOM is only appearing in front of model that is in <Scroll html> </Scroll> tags