css

.container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  margin-top: 100vh;
  & > .background {
    position: sticky;
    top: 0;
    left: 0;
    grid-area: 1 / 1 / 2 / 2;
    z-index: 1;
    width: 100%;
    height: 100vh;
  }
  & > .content {
    position: sticky;
    grid-area: 1 / 1 / 2 / 2;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    & > .box1 {
      width: 100%;
      height: 150vh;
      background-color: transparent;
      font-size: 600px;
      color: white;
    }
    & > .box2 {
      width: 100%;
      height: 150vh;
      background-color: green;
      font-size: 600px;
      color: white;
    }
  }
}

html

<div class="container">
  <img src="assets/images/1.jpg" class="background" />
  <div class="content">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
  </div>
</div>