<div class="image-1">
  <div class="text">
      <span class="background">Scroll Down⬇</span>
  </div>
</div>

<div class="main">
  <h3>TULIPS</h3>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur est urna, malesuada sollicitudin tempus non, rutrum eu diam. Suspendisse vitae lobortis ante, sit amet venenatis erat. Nulla sollicitudin placerat sapien id aliquam. Fusce malesuada, est at venenatis sagittis, nulla risus elementum neque, sit amet varius odio sem eget libero. Cras scelerisque ex lectus, vel molestie arcu tristique vulputate. Nunc fringilla suscipit massa. Praesent nulla sem, aliquam et molestie id, eleifend ac nunc. Aliquam augue odio, porta sed lacinia non, iaculis sed lorem. Proin pulvinar ex quis turpis pulvinar fringilla. Ut a risus dictum velit consequat consectetur ut eu nulla. Phasellus a convallis velit. Sed fermentum justo at justo semper, ut semper velit porta. Phasellus luctus est quam, id pulvinar urna consectetur ut. Mauris tristique erat ut risus varius placerat. Vivamus dui arcu, vulputate et mi nec, eleifend rhoncus nunc.
</p>
</div>

<div class="image-2">
  <div class="text">
  <span class="background">Tulip Festival</span>
  </div>
</div>

<div class="someText">
  <div style="background-color:#333;text-align:center;padding:50px 80px;text-align: justify;">
  <p>Scroll up and down to see how Parallax Scrolling works.</p>
  </div>
</div>

<div class="image-3">
  <div class="text">
  <span class="background">Scroll Up⬆</span>
  </div>
</div>

<div class="someText">
  <div style="background-color:#333;text-align:center;padding:50px 80px;text-align: justify;">
  <p>Scroll up and down to see how Parallax Scrolling works.</p>
  </div>
</div>

<div class="image-1">
  <div class="text">
  <span class="background">Thanks!</span>
  </div>
</div>
body, html {
  height: 100%;
  margin: 0;
  font-family: tahoma;
  letter-spacing:2px;
  color: #333;
}

.image-1, .image-2, .image-3 {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.8;
}
.image-1 {
  background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/1a-1024x576.jpg");
  min-height: 100%;
}

.image-2 {
  background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/2a-1024x576.jpg");
  min-height: 450px;
}

.image-3 {
  background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/3a-1024x576.jpg");
  min-height: 450px;
}

.text {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #333;
}

.text .background {
  background-color: #000;
  border-radius:20px;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

.main {
  color: #333;
  background-color:#fff;
  text-align:center;
  text-align: justify;
  padding:60px 90px;
}

h3 {
  letter-spacing: 5px;
  font-size: 20px;
  font-family: tahoma;
  color: #333;
  text-align:center;
}

.someText {
  position:relative;
  color: #fff;
}

@media only screen and (max-device-width: 1024px) {
  .image-1, .image-2, .image-3 {
    background-attachment: scroll;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.