Hero with background image

A full-width photo behind a headline sets the mood instantly, as long as the text stays readable on every screen.

Sketch of a hero section with a photo background and a centred text panel

Building it

  1. Add a full-width container. Under Style → Background, choose Classic and set the image, Position: Center Center and Size: Cover.
  2. Under Background Overlay, add a dark colour or gradient at 40–60% opacity so white text has enough contrast.
  3. Set a Min Height (for example 70vh on desktop, 520 px on mobile) rather than a fixed height, so long headlines don't overflow.
  4. Inside, a boxed container with Heading, Text Editor and Button.

Mind the focal point

A wide photo becomes a narrow crop on phones. Set a separate background position for mobile (responsive controls), or choose a separate mobile image if the subject disappears.

Speed

The hero image is usually the largest thing on the page and often the "largest contentful paint". Export it at about 1920 px wide and compressed (WebP, roughly 150–300 KB). CSS background images aren't lazy-loaded and can't use srcset; if speed matters a lot, use an Image widget positioned behind the content instead.

Readable text

White text needs a contrast ratio of at least 4.5:1 against what's behind it. Check the brightest part of the photo, not the average.