Text over a photo hero: scrims, contrast and desaturation

A full-bleed photograph behind a headline is one of the most striking hero layouts, and one of the most often unreadable. Photos have bright patches, and white text over a bright patch disappears.

The scrim

.hero { position: relative; isolation: isolate; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%;
            object-fit: cover; z-index: -2; filter: saturate(0.6); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, oklch(12% 0.01 260 / 0.85) 0%,
                              oklch(12% 0.01 260 / 0.35) 55%, transparent 100%); }

A gradient from the text's side keeps the text ground dark and leaves the rest of the photo vivid. The saturate filter quiets the image so it supports the headline instead of competing with it.

Choose and crop for the text

• Pick photos with a calm area: sky, a wall, a dark foreground.
• Set object-position so the calm area sits where the text is, at every width.
• Check the crop at 375px. A phone crop can put the brightest part right behind the headline.

Check the worst case

Contrast must pass against the brightest pixel behind the text, not the average. Sample it in dev tools or an image editor and check the ratio; see contrast in a dark UI for the numbers.

Performance

The hero photo is usually the largest thing on the page. Serve it as AVIF or WebP, give it width and height, load it eagerly with high fetch priority, and provide smaller sizes with srcset. A slow hero is a slow page.

This hero pairs well with a serif headline; see editorial web design.

Editorial Ledger UI builds this hero: a desaturated photograph under a coal scrim, a two-line serif headline with the second line in italic lime, and one lime button.