JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id='container'>
      <div id="group1">
        <div class="background">
          <div style="height: 10rem"></div>
          <center>Banner</center>
          <div style="height: 10rem"></div>
        </div>
        <div class="foreground">
          <div style="height: 10rem"></div>
          <center>Content</center>
          <div style="height: 100rem"></div>
        </div>
      </div>
    </div>
  </body>

CSS

#container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  perspective: 1px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.background {
  transform: translateZ(-1px) scale(2);
  width: 100%;
  background: lightgreen;

  height: 250px; /* Assumes bg height */

  position: absolute;
  top: calc(125px - 50vh); /* Assumes bg height */
}

.foreground {
  background: rgba(0, 0, 255, 0.5);
  width: 100%;

  position: absolute;
  top: 250px; /* Assumes bg height */
}