JSFiddle - React, Tailwind, and code Playground

HTML

<div id="background"></div>
<div id="first-section">A B C D E F</div>
<div id="transparent-area"></div>
<div id="second-section">G H I J K L</div>

CSS

#background {
  height: 100vh;
  background-image: url("https://images.unsplash.com/photo-1612225330812-01a9c6b355ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80");
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

#first-section {
  height: 300px;
  background-color: #000033;
}

#second-section {
  height: 300px;
  background-color: #000033;
}

#transparent-area {
  height: 300px;
}