With create-react-app, I want to implement a simple parallax effect with the help of the npm-package "React Scroll Parallax" with a slowly scrolling background image and a faster scrolling <div> on top. This <div> shall have a "frosted glass"-effect, implemented via CSS "backdrop-filter: blur". I can make the parallax effect work without the backdrop-filter and I can make the backdrop-filter work without the parallax effect. The problem now is: I can't make them work together. I assume the parallax-components brake the correct div-order that is needed for my CSS-approach.

This is my React component "Appbackground.js":

import React from 'react'
import { Parallax } from 'react-scroll-parallax';

class Appbackground extends React.Component {

    constructor(props) {
      super(props);
      this.state = {
      };
    }
  
    render() {
       return (
          <div>
             <Parallax speed={-10}>
                <div className={'Header'}></div>
             </Parallax>
             <Parallax speed={10}>
                <div className={'Container'}></div>
             </Parallax>
          </div>
       )
    }
}
  
export default Appbackground

This is the relevant part of my "index.css":

.Header {
  background: url(./Images/Test.jpg);
  min-height: 596px;
}

.Container {
    min-height: 2000px;
    min-width: 100%;
    position: absolute;
    top: 100px;
    padding: 20px 20px 20px 20px;
    background-color: rgba(20, 20, 20, 0.15);
    backdrop-filter: blur(12px);
}

.Container:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

How can I make it work?