Html – How to extend the background to the entire webpage?

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

        <script>
                   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>


This is my about section container that is the second page that i scroll to and to see it i made it transparent but still not getting the full background 

and this is the div container 
 <div id="about">
        <div class="container">
            <div class="row">
                <div class="about-col-1">
                    <img src="images/user.png" alt="User Photo">
                </div>
                <div class="about-col-2">
                    <h1>About Me</h1>
                    <!-- <p>This is the about section. Here, you can provide a brief introduction or background about yourself or your portfolio.</p> -->
                </div>
            </div>
        </div>
    </div>


this is the css code for that 

 #about {
            background-color: transparent; /* Make background invisible */
            color: green; /* Match text color to matrix color */
            padding: 100px 20px;
            text-align: center;
            position: relative;
            z-index: 1; /* Ensure it's above the matrix background */
        }