Pure CSS Parallax additional space problem [duplicate]

Question

What I want to achieve

I want to add a parallax effect to a single fullscreen section with dynamic content (has not fixed height) and a background.

I would like that on a scroll the background would move slower than the content and that the background would be high enough to cover the whole content.

What I've tried

To achieve that I have:

• set perspective: 10px to .root
• set transform: translateZ(-10px) scale(2) to .background
• put .background into .container and set it's position to absolute so it has the container's height (which is dependent on content's height)

Problem

The problem is that when I scroll down to the bottom I can see:

• bottom of the .content
• a piece of a .background
• a black piece of body's black background (appears on Chrome)

When I would scroll down to the bottom I would like that the .content would be the end of the screen and that I wouldn't see anything else beneath it.

Code

body { margin: 0; background: #000; }

.wrapper {
  height: 100vh;
  overflow: scroll;
  perspective: 10px;
}

.container {
  position: relative;
  transform-style: preserve-3d;
}

.content {
  display: flex; flex-direction: column; justify-content: space-between;
  height: calc(100vh + 100px);
  padding: 20px 0;
  background: rgba(255, 0, 0, 0.2);
  text-align: center;
}

.background {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
  background-image: linear-gradient(cyan, pink);
  transform: translateZ(-10px) scale(2);
}

<div class="wrapper">
  <div class="container">
    <div class="content">
      <p>top content</p>
      <p>center content</p>
      <p>bottom content</p>
    </div>
    
    <div class="background"></div>
  </div>
</div>

Question

How can I achieve it? I have no idea how can I make it work.

Please help

Answer 1

Something like this?

body { margin: 0; background: #000; }

.wrapper {
  height: 100vh;
  overflow: scroll;
  perspective: 10px;
}

.container {
  position: relative;
  transform-style: preserve-3d;
}

.content {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 20px 0;
  background: rgba(255, 0, 0, 0.2);
  text-align: center;
}

.content p {

  height: 100vh;
 }

.background {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
  background-image: linear-gradient(cyan, pink);
}

<div class="wrapper">
  <div class="container">
    <div class="content">
      <p>top content</p>
      <p>center content</p>
      <p>bottom content</p>
    </div>
    
    <div class="background"></div>
  </div>
</div>