I am trying to build a CSS-only parallax background, which moves at a different speed than its text content. So far everything works except that I can't get the background to stretch/position so that it won't run out of space when the page is scrolled to its bottom.
I've created a snippet for you, which shows a grid background (png). I can change the size of the grid png but no matter what I try, the grid-free space at the bottom won't go away. I've tried playing around with margins and paddings, scaling the different parallax elements and changing the perspective/translateZ():
.parent-container {
background-color: #15152a;
}
.parallax-container {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
.parallax-layer {
transform-style: preserve-3d;
}
.parallax-layer::after {
position: absolute;
content: '';
inset: 0;
transform: translateZ(-2px) scale(2);
background: url('https://i.postimg.cc/138FbqVX/grid.png');
background-size: 100%;
z-index: -1;
height: 100vh;
}
.content {
padding: 50vh 16% 10vh 27%;
color: white;
font-size: 4rem;
} <div class="parent-container">
<div class="parallax-container">
<div class="parallax-layer">
<div class="content">
hello world
</div>
</div>
</div>
</div>I want to get rid of the bottom part of the page, which has no grid.