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

[Anonymous]

Блок-цитата

Код: Выделить всё

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

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

const символов =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
const матрицаBackground = 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