A hero stays readable across every width when you decouple the text’s legibility from the background image’s behavior. The mechanism is that an image and the type laid over it scale, crop, and reflow on different logic, so if you let the picture govern the text’s readability, you have tied your message to something that changes shape at every viewport. Give the text its own contrast, its own container, and its own bounded type scale, and it survives whatever the image does behind it.
The first lever is contrast that does not depend on the image. A full-bleed photo shifts under the text as it crops: a bright sky on desktop becomes a busy window of buildings on mobile, and white text that read perfectly over the sky vanishes over the buildings. Anchor the text’s contrast in something you control, a gradient scrim, a tint overlay, a solid panel behind the words, so the type meets a predictable background no matter which slice of the photo shows. The image can do whatever it likes; the text always sits on a surface you guaranteed. The failure this prevents is the most common one in heroes: text that passes contrast at the width the designer happened to be viewing and quietly fails at every other width, because nobody checked the type against the parts of the photo that only appear after a crop.
The second lever is a container and a protected focal point. Constrain the text to its own block rather than letting it float across the whole hero, so on an ultrawide monitor the line length does not stretch into an unreadable ribbon and on a phone the words do not collide with the photo’s subject. Decide which part of the image must never be cropped out, the face, the product, the horizon, and pin the image’s position so that focal point holds as the frame narrows. A hero often crops from the edges inward, and without a protected focal point the small screen quietly amputates the very thing the picture was chosen for.
The third lever is type that scales within bounds. Let the headline grow and shrink with the viewport, but cap it at both ends so it never becomes a timid whisper on the smallest screen or a wall-filling shout on the largest. Worth flagging: none of this is about making the hero prettier; it is about readability, and a hero can be visually striking while its text is illegible. There are also heroes with no overlaid text at all, image beside copy rather than copy on image, and that layout sidesteps the whole problem by never asking the photo to be a background. When you do stack text on an image, the levers are not optional.
Give your hero text its own contrast and its own container so it survives every crop of the image. Build the scrim or panel first, pin the focal point so it cannot be cropped away, bound the type scale at both extremes, and then test the hero at a true phone width, a tablet, a laptop, and an ultrawide before you trust it. Drag the window slowly through the in-between widths too, since that is where a scrim thins out, a container hits its limit, or the focal point starts to slide off the edge. Never let the background dictate whether your most prominent words can be read; the image is there to support the message, not to decide whether anyone can see it.