Text-behind-subject website heroes: how they work and how to make one

You have seen it on posters and magazine covers: a giant word, and a person or object standing in front of part of it. On a website the trick is the same, with one rule that matters: the words stay real text, so they can be read, selected, translated and indexed.

The three layers

The front layer is the same picture as the back, with everything except the subject made transparent. Because the two line up exactly, the eye reads one picture with the words passing behind the subject.

Make one from a photo

1. 1

   Step 1: Cut out the subject

   Mask the subject in an image editor, or use a background remover you have the rights to use. Export it alone as a PNG or WebP with transparency, at exactly the same pixel size as the photo, so the two line up.

2. 2

   Step 2: Stack the layers

   Put the photo, the headline and the cut-out in one box, all filling it, and crop both pictures the same way.

   HTMLCopy HTML

   <section class="tbs">
     <img class="tbs-back" src="/photo.jpg" alt="A camper van by the palms at sunset">
     <h1 class="tbs-title">Go west</h1>
     <img class="tbs-front" src="/subject.webp" alt="">
   </section>

   CSSCopy CSS

   .tbs { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
   .tbs > * { position: absolute; inset: 0; margin: 0; }
   .tbs-back, .tbs-front { width: 100%; height: 100%; object-fit: cover; object-position: center; }
   .tbs-title { display: grid; place-items: center; font-size: clamp(64px, 18vw, 280px); line-height: 1; }
   .tbs-front { pointer-events: none; }

3. 3

   Step 3: Place the words

   Move the headline until the subject covers a little of it. Covering a letter or two reads as depth; covering half a word stops it reading. Check at phone width too, where the text wraps and the crop changes.

Make one from a video

When the subject moves, the cut-out has to move with it, frame by frame. The usual way is a matte: a second video, white where the subject is and black everywhere else. The page draws the film, then the text, then the film again with the matte as its transparency, so only the subject lands on top of the words.

• Stack the film and its matte in one video file, one above the other, so they can never drift apart.
• Draw the film on a canvas, put the headline layer over it, then draw film × matte on top with WebGL.
• Seek any text animation to the film’s own clock, so the words and the footage stay in step on a slow device.
• Host the film on the same site as the page, or on a CDN that sends CORS headers. Otherwise the browser won’t let the canvas draw it.

Another route is a second video of the subject alone with an alpha channel, such as WebM with VP9 alpha, played over the text. Browser support for alpha video varies, so test it in Safari, and two separate videos can drift out of step. The stacked matte avoids both problems.

Fallbacks that keep it readable

• With reduced motion, no WebGL, or a film that fails to start, show a still: the last frame, with its cut-out over the words.
• On phones, keep the headline in the frame and move the introduction and buttons into a block underneath.
• Pause the film when it scrolls off screen or the tab is in the background.
• Never bake the words into the video. Text in pixels can’t be read by screen readers or search engines, and it can’t be changed without a new render.

Make one with an agent

Lookbk’s Footage Heroes are text-behind-subject video heroes built this way, on five seconds of generated retro footage with its matte stacked underneath. Your agent writes your words and links into one hero.json; the build checks every length, writes a page and an embed, checks it at four widths and records a 1080p MP4 with sound. The film and its matte stay as they are, so you can’t swap in your own footage.

New

web

Neon Motel HeroWebGLFFmpegClaude CodeCodexCursor+3 more agents

New

web

Den Computer HeroWebGLFFmpegClaude CodeCodexCursor+3 more agents

New

web

Disco Rink HeroWebGLFFmpegClaude CodeCodexCursor+3 more agents

For the photo version, Cutout Float Hero takes your own transparent cut-out and floats it in front of a huge word, with a little depth as the pointer moves. More picks are in the best video background hero sections.