Usage

HTML

<header class="hero theme">
  <img src="/images/hero/img.webp" alt="" />

  <div class="hero-content">
    <div class="l-center" style="--cr-max-width: var(--bp-40)">
      <div class="u-gutter">
        <div class="l-stack" style="color: var(--white); text-align: center; ">
          <h1>Article Title</h1>
          <p style="font-size: var(--s2); max-width: 55ch">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex est
            sequi aperiam libero possimus dolorum, aliquid, iste eaque nisi hic
            autem.
          </p>
          <a href="/" class="button theme" style="margin-inline: auto;"
            >Learn More</a
          >
        </div>
      </div>
    </div>
  </div>
</header>

SCSS

.hero {
  position: relative;
  overflow: hidden;
  max-height: 600px; 
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.hero:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-color: var(--black);
  opacity: 0.3;
}

.hero > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero > *:not(img) {
  position: relative;
  z-index: 3;
}

.hero-content {
  height: 100%;
  min-height: var(--hero-min-height, 37.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--global-padding);
}

Content

The text content determines the height. The custom property --hero-min-height allows for setting a minimum height on the content. This ensures the hero can expand as needed.

Image

This approach uses an <img> tag set to object-fit: cover so that it fills the available space. This allows us to take advantage of the responsive features available.

• The srcset and sizes attributes provides the browser with information needed to choose the appropriate image image given the device and network speed.
• The fetchpriority='high' attribute informs the browser that this image should be loaded as quickly as possible.
• Note, leaving an empty alt tag indicates to browser/user that image is decorative, will not be announced via screenreader. It will be treated like an image.