<header class="header">
  <div class="container">
    <h2>header</h2>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio culpa minima error ipsa blanditiis quae optio atque consectetur impedit ipsum amet nihil illo, placeat ullam ad voluptates voluptatum, expedita in.
  </div>
</header>

<div class="wrap-1-2">
  <section class="section section--1">
    <div class="container">
      <h2>section 1</h2>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim sapiente voluptates illum labore illo maxime? Officia sed ipsa soluta fugiat voluptates, veniam iure impedit dolores architecto blanditiis minus asperiores dolorum sequi et ipsam nisi natus quidem expedita illo! Ipsam quis eveniet animi praesentium doloremque minus aperiam magni nam? Cupiditate eveniet error est exercitationem impedit officiis ea ut neque modi, esse praesentium natus expedita laboriosam temporibus sunt necessitatibus, dolor molestias! Nulla in ad excepturi, et sequi delectus placeat impedit mollitia minus repellendus esse dolorem amet temporibus minima deserunt atque aliquid vero quasi facilis? Nostrum atque temporibus at. Ipsa cupiditate libero harum?
    </div>
  </section>

  <section class="section section--2">
    <div class="container">
      <h2>section 2</h2>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim sapiente voluptates illum labore illo maxime? Officia sed ipsa soluta fugiat voluptates, veniam iure impedit dolores architecto blanditiis minus asperiores dolorum sequi et ipsam nisi natus quidem expedita illo! Ipsam quis eveniet animi praesentium doloremque minus aperiam magni nam? Cupiditate eveniet error est exercitationem impedit officiis ea ut neque modi, esse praesentium natus expedita laboriosam temporibus sunt necessitatibus, dolor molestias! Nulla in ad excepturi, et sequi delectus placeat impedit mollitia minus repellendus esse dolorem amet temporibus minima deserunt atque aliquid vero quasi facilis? Nostrum atque temporibus at. Ipsa cupiditate libero harum?
    </div>
  </section>
</div>

<footer class="footer">
  <div class="container">
    <h2>footer</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim sapiente voluptates illum labore illo maxime? Officia sed ipsa soluta fugiat voluptates, veniam iure impedit dolores architecto blanditiis minus asperiores dolorum sequi et ipsam nisi natus quidem expedita illo! Ipsam quis eveniet animi praesentium doloremque minus aperiam magni nam? Cupiditate eveniet error est exercitationem impedit officiis ea ut neque modi, esse praesentium natus expedita laboriosam temporibus sunt necessitatibus, dolor molestias! Nulla in ad excepturi, et sequi delectus placeat impedit mollitia minus repellendus esse dolorem amet temporibus minima deserunt atque aliquid vero quasi facilis? Nostrum atque temporibus at. Ipsa cupiditate libero harum?
  </div>
</footer>
body {
  margin: 0;
  color: crimson;
  font-family: sans-serif;
  line-height: 1.45;
}

.container {
  max-width: 80%;
  margin: 0 auto;
  padding: 0 15px;
  position: relative;
  z-index: 1;
}

.wrap-1-2 {
  position: relative;
  background:
    url('https://i.ibb.co/58kSsDT/lightness.jpg') no-repeat center bottom / cover,
    linear-gradient(90deg, #00bbb3, #00a5d7);
  background-blend-mode: luminosity;
  z-index: 0;
}

.wrap-1-2::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 166px;
  top: -83px;
  left: 0;
  background: url('https://i.ibb.co/DLgCQFQ/top.png') repeat-x center / 960px 100%;
  z-index: -1;
}

.wrap-1-2::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 145px;
  left: 0;
  bottom: -72px;
  background: url('https://i.ibb.co/qFC5pRX/bottom.png') repeat-x center / 960px 100%;
  z-index: -1;
}


.section {
  margin: 20px 0;
}

.footer {
  background: url('https://i.ibb.co/Gv30cp6/sand.png') repeat center / 400px 400px;
  padding: 20px 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.