style.css

body {
  font-family: 'Oswald', sans-serif;
  font-weight: bold;
  font-size: 12vw;
  letter-spacing: 0.35rem;
}

@media (max-width: 768px) and (orientation: portrait) {
  body {
    font-size: 16vw;
  }
}

section {
  width: 100%;
  height: 100vh;
  background: #a2bdf2;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
}

.text {
  padding: 3rem 1.5rem;
  color: black;
}

.big {
  font-size: larger;
}

/* Style 1 */
.style-1 {
  background-image: url('https://picsum.photos/id/830/1920/1080');
  background-attachment: fixed;
}

.style-1 .text {
  mix-blend-mode: overlay;
}

/* Style 2 */
.style-2 {
  background-image: url('https://picsum.photos/id/112/1920/1080');
  background-clip: text;
  -webkit-background-clip: text;
  background-attachment: fixed;
}

.style-2 .text {
  color: transparent;
}

/* Style 3 */
.style-3 {
  position: relative;
}

.bg-solid-1,
.bg-solid-2 {
  position: absolute;
  top: 0;
  left: 0;
}

.bg-solid-1,
.bg-solid-2 {
  height: 100%
}

.bg-solid-1 {
  width: 100%;
  background: white;
  z-index: 1;
}

.bg-solid-2 {
  width: 60%;
  background: black;
  z-index: 2;
  transform: translate(-40%, 0%) skew(30deg);
}

.style-3 .text {
  position: relative;
  z-index: 3;
  color: white;
  mix-blend-mode: difference;
}

/* Style 4 */
.style-4 {
  background-image: url('https://picsum.photos/id/112/1920/1080');
}

.style-4 .nested-bg {
  background-image: url('https://picsum.photos/id/830/1920/1080');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0% 0%;
  background-clip: text;
  -webkit-background-clip: text;
  background-attachment: fixed;
}

.style-4 .text {
  color: transparent;
}