JSFiddle - React, Tailwind, and code Playground

by RAX7

HTML

<section class="section section--1" style="--background-image: url('https://images.unsplash.com/photo-1517451330947-7809dead78d5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80')">
  <div class="section__inner">
    <div class="container">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam, voluptatum tempora inventore nostrum aspernatur voluptatibus suscipit illo repellendus reiciendis exercitationem aliquam magnam architecto, laborum quod quisquam corrupti perferendis hic molestiae?
    </div>
  </div>
</section>

<hr>
<hr>

<section class="section section--2" style="background-image: url('https://images.unsplash.com/photo-1517451330947-7809dead78d5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80')">
  <div class="section__inner">
    <div class="container">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam, voluptatum tempora inventore nostrum aspernatur voluptatibus suscipit illo repellendus reiciendis exercitationem aliquam magnam architecto, laborum quod quisquam corrupti perferendis hic molestiae?
    </div>
  </div>
</section>

<hr>
<hr>

<section class="section section--3" style="background-image: url('https://images.unsplash.com/photo-1517451330947-7809dead78d5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80')">
  <div class="section__inner">
    <div class="container">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam, voluptatum tempora inventore nostrum aspernatur voluptatibus suscipit illo repellendus reiciendis exercitationem aliquam magnam architecto, laborum quod quisquam corrupti perferendis hic molestiae?
    </div>
  </div>
</section>

CSS

body {
  margin: 0;
  font-size: 1.5rem;
}

/* ============= */

.section--1 {
  position: relative;
  z-index: 0;
}

.section--1::before {
  content: '';
  position: absolute;
  inset: 0 0 0 20%;
  background: var(--background-image) no-repeat center / cover;
  z-index: -1;
}

/* ============= */

.section--2 {
  position: relative;
  background: no-repeat center / cover;
  z-index: 0;
  visibility: hidden;
}

.section--2::before {
  content: '';
  position: absolute;
  inset: 0 0 0 20%;
  background: inherit;
  z-index: -1;
  visibility: visible;
}

.section--2 .section__inner {
  visibility: visible;
}

/* ============= */

.section--3 {
  padding-left: 20%;
  background: no-repeat content-box center / cover;
}

.section--3 .section__inner {
  margin-left: calc(100 / (100 - 20) * -20%);
}