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

[Anonymous]

Я установил для .matrix-background значение Position:fixed и скорректировал свойства ширины, высоты и верха, чтобы он покрывал всю страницу.
Я использовал document.body.scrollHeight code> в JavaScript для расчета высоты страницы, надеясь, что анимация охватит всю страницу.
Мне нужен матричный фон на всей веб-странице, даже если я прокрутлю вниз до конца, но я' Я получаю фон только до первого контейнера.
вот мой index.html Фон матрицы
.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