How to extend the background to the entire webpage?

Blockquote

I set .matrix-background to position: fixed and adjusted width, height, and top properties to make it cover the full page.
I used document.body.scrollHeight in JavaScript to calculate the page height, hoping the animation would cover the entire page.

I want the matrix background on the whole webpage even if i scroll down till the end but i'm only getting the background till the first container 

here is my index.html Matrix background

 .matrix-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: -1;
            overflow: hidden;
        }

and this is my script for the background

const characters =
“ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789”;
const matrixBackground = document.querySelector(‘.matrix-background’);

                function createMatrix() {
                    const span = document.createElement('span');
                    span.style.position = 'absolute';
                    span.style.color = 'green';
                    span.style.fontSize = '20px';
                    span.style.whiteSpace = 'nowrap';
                    span.style.opacity = Math.random();
                    span.textContent = characters.charAt(Math.floor(Math.random() * 
         characters.length));
            
                     const x = Math.random() * window.innerWidth;
                     span.style.left = `${x}px`;
                     span.style.top = `-${Math.random() * 100}px`;  // Start just 
            above the viewport
                     matrixBackground.appendChild(span);
            
                      // The span falls down to cover the visible viewport and beyond 
       to mimic continuous effect
                       const fallDuration = Math.random() * 3 + 2;
                       span.animate([{ transform: 'translateY(0)' }, { transform: 
         `translateY(${window.innerHeight * 2}px)` }], {
                           duration: fallDuration * 1000,
                          easing: 'linear',
                           iterations: 1,
                          fill: 'forwards',
                      });
            
                      setTimeout(() => {
                           span.remove();
                       }, fallDuration * 1000);
                   }

                 setInterval(createMatrix, 100);
                </script>

Blockquote