Background Media Hero

The content sits over delegated image media inside a container-width frame.

Hero background media showcase

This page overrides the hero block for this page only.

What's configured here (see config/page_level/showcase-hero-background.config.php):

  • hero.mediaPosition = 'background' — the image sits behind the text and fills the hero frame.
  • hero.mediaWidth = 'container' — the hero is constrained to the main content width instead of going full-bleed.
  • hero.useGlass = true — the text sits over a translucent glass panel.
  • hero.media.type = 'image' and hero.media.overlay = true — the image is delegated through the content image renderer and then darkened with a scrim.
  • hero.media.overlayOpacity = 0.58 — fine-tunes the scrim strength so the copy remains legible.
  • hero.actions — the CTA links are set up as page-level hero actions and run through the site-root-aware URL prefix logic.

Still to review: the balance between the SVG palette and the scrim opacity, and whether this background treatment should stay container-width or become full-bleed in the final site style.