<div class="hero">
  <div class="hero-overlay"></div>
  <h1>Vague Platitudes</h1>
  <p>Suspended over expansive photographs. A typical Hero component.</p>
</div>

<article>
  <h1>Article title</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid dicta dolor animi quis in, aperiam nesciunt nulla possimus velit, omnis aut quia accusantium, sed nemo. Saepe praesentium odit quisquam iure.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam molestias explicabo sunt, alias minus quidem dolor voluptatibus distinctio doloribus repellendus! At distinctio in nam eos? Tempora quibusdam a hic odit.
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel asperiores quaerat voluptate ipsum alias quos dolore, cupiditate sint pariatur omnis, adipisci dolor, in consequuntur aliquam suscipit minus rem. Error, atque!</p>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam molestias explicabo sunt, alias minus quidem dolor voluptatibus distinctio doloribus repellendus! At distinctio in nam eos? Tempora quibusdam a hic odit.
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel asperiores quaerat voluptate ipsum alias quos dolore, cupiditate sint pariatur omnis, adipisci dolor, in consequuntur aliquam suscipit minus rem. Error, atque!</p>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam molestias explicabo sunt, alias minus quidem dolor voluptatibus distinctio doloribus repellendus! At distinctio in nam eos? Tempora quibusdam a hic odit.
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel asperiores quaerat voluptate ipsum alias quos dolore, cupiditate sint pariatur omnis, adipisci dolor, in consequuntur aliquam suscipit minus rem. Error, atque!</p>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam molestias explicabo sunt, alias minus quidem dolor voluptatibus distinctio doloribus repellendus! At distinctio in nam eos? Tempora quibusdam a hic odit.
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel asperiores quaerat voluptate ipsum alias quos dolore, cupiditate sint pariatur omnis, adipisci dolor, in consequuntur aliquam suscipit minus rem. Error, atque!</p>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam molestias explicabo sunt, alias minus quidem dolor voluptatibus distinctio doloribus repellendus! At distinctio in nam eos? Tempora quibusdam a hic odit.
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel asperiores quaerat voluptate ipsum alias quos dolore, cupiditate sint pariatur omnis, adipisci dolor, in consequuntur aliquam suscipit minus rem. Error, atque!</p>
</article>
@import url('https://fonts.googleapis.com/css?family=Raleway');

body {
  margin: 0;
  font-family: 'Raleway';
  overflow-x: hidden;
}

.hero {
  background-image: url(https://raw.githubusercontent.com/codypearce/codepen-files/main/pens/simple-background-attachment/background.avif);
  background-blend-mode: lighten;
  background-attachment: fixed;
  height: 100vh;
  width:100vw;
  background-size: cover;
  color: white;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}
.hero-overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  background: rgba(0,0,0,.3);
}

.hero h1 {
  font-weight: 100;
  z-index: 1;
  margin-top: 200px;
}
.hero p {
  z-index: 1;
  letter-spacing: 1px;
}

article {
  width: 70%;
  margin: 50px auto;
  overflow-x: hidden;
  color: #555;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.