Как расширить фон на всю веб-страницу? ⇐ CSS

[Anonymous]

Я установил для .matrix-background значение Position:fixed и скорректировал свойства ширины, высоты и верха, чтобы он занимал всю страницу.
Я использовал document.body.scrollHeight в JavaScript чтобы вычислить высоту страницы, надеясь, что анимация охватит всю страницу.
Мне нужен матричный фон на всей веб-странице, даже если я прокрутлю вниз до конца, но я получаю только фон до первого контейнера
здесь это мой фон index.html Matrix
.matrix-background {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: -1;
overflow: hidden;
}

а это мой сценарий для фона

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);



Подробнее здесь: https://stackoverflow.com/questions/791 ... re-webpage