You found a background photo you like, dropped your headline on top, and the words half-vanished into it. The fix is rarely a different font or a bigger size. It is choosing an image that leaves room for text, then treating it so the copy sits in a calm part of the frame.
This guide walks through how to read a background image for legibility, how to use overlays and gradients to win back contrast, and where to put your words so they stay easy to read. It is part of the beginner's guide to using images on your website, which covers the wider set of image decisions that surround this one.
Why text disappears into a photo
Text becomes hard to read for two reasons, and they often happen together.
The first is contrast. Light text needs a dark area behind it, and dark text needs a light area. When your headline and the pixels behind it are close in brightness, the letters and the background blur into each other. A white headline over a pale sky is the classic version of this.
The second is busyness. Even with decent contrast, a region packed with detail (leaves, faces, signage, sharp edges, lots of small shapes) fights with letterforms. Your eye has to separate the words from the texture, and that effort reads as "this looks cluttered." A quiet, low-detail region behind the text removes that fight.
So the goal when you pick a background is not "a beautiful photo." It is "a beautiful photo with a calm, evenly toned area where the words can live."
Look for negative space and quieter regions
Before you do anything to the image, judge whether it can carry text at all. Look for two things.
- Negative space — an open, uncluttered area with little going on. A clear sky, a plain wall, an out-of-focus background, a sweep of sand or water. This is where copy is easiest to place.
- Low-contrast regions — a patch where the brightness stays fairly even across the whole area, rather than jumping from bright highlight to deep shadow. Even tone is what lets a single text color stay readable across a whole headline.
A quick way to test an image is to squint at it or shrink the thumbnail until detail drops away. The areas that stay smooth and even-toned are your candidates. The areas that still look busy or splotchy at small size will fight your text.
Some images simply have no good text zone. A photo where the subject fills the frame edge to edge, or where bright and dark areas are scattered everywhere, will resist every trick below. It is usually faster to pick a different background than to rescue one that has nowhere quiet to put words.
Use overlays and gradients to win back contrast
When an image you like is a little too busy or too close in tone to your text, an overlay does most of the work. An overlay is a layer of color placed between the photo and the text.
- A solid dark overlay (a semi-transparent black or deep brand color) darkens the whole image so light text reads cleanly. Good when your text is white or pale and the photo is mid-toned or bright.
- A solid light overlay (a semi-transparent white or very pale tint) lightens the image so dark text reads. Good when your text is dark and the photo is busy.
- A gradient overlay fades from more opaque on one side to transparent on the other. This is the most useful for backgrounds, because it darkens (or lightens) only the region where your text sits and leaves the rest of the photo visible. A common pattern is a gradient that is darker at the bottom or one side, with the headline placed in that darker band.
Most website builders and design tools let you add an overlay as a background color with reduced opacity, or as a CSS gradient layer. Start subtle and increase the strength until the text is comfortably readable, not until the photo disappears. If you can barely see the image any more, you have overcorrected and may as well have used a flat color.
A note on the limits here. An overlay changes the contrast between your text and the background, so the right amount depends on your exact text color and how strong you make the overlay. Whether a given combination meets a formal accessibility contrast target is something you check on the finished page, not something the photo guarantees on its own. The deeper version of that is in making sure everyone can use your site, which covers how contrast affects readers with low vision and how to check it properly.
Where to place copy in the frame
Treating the image is half the job. The other half is putting the words in the right place.
- Put text in the calm zone you found earlier. If the open sky is top-left, anchor your headline top-left. Do not center text over the busiest, most detailed part of the photo just because center looks tidy.
- Keep copy clear of faces and focal points. Text laid across a face or the main subject reads poorly and tends to look like a mistake.
- Mind the responsive crop. A background that has clear space on the right at desktop width can crop to nothing but busy subject on a narrow phone screen. Check your text region at both wide and narrow sizes, because builders crop backgrounds differently per device.
- Give the text room. Padding between the words and the edge of their calm zone makes the whole block easier to read. Crammed-in text looks cheap even when the contrast is fine.
If you want a fuller list of the small treatment errors that drag a page down, the image mistakes that make a site look cheap covers the usual suspects, including stretched and low-contrast hero images.
Choose overlay-friendly images from the start
The least painful path is to pick a background that was built to hold text in the first place, rather than fighting a busy photo into shape. Some image styles leave deliberate text space and tolerate overlays well.
| Background style | Text space | Overlay behavior | Best for |
|---|---|---|---|
| Open scene with negative space (sky, water, plain wall) | Built in | Takes a gradient cleanly | Hero headlines, landing sections |
| Abstract or gradient background | Whole frame is calm | Often needs little overlay | Headers, CTAs, section dividers |
| Soft, blurred or out-of-focus photo | Generous | Light overlay usually enough | Headlines over a photographic mood |
| Busy, detailed, edge-to-edge subject | Little to none | Needs heavy overlay, often still hard | Better used without text on top |
You can also solve this at the sourcing step rather than the styling step. Backgrounds chosen for overlay-friendly, text-ready space need less treatment than photos rescued with a scrim, and gradient and abstract backgrounds are calm by nature, so a headline tends to sit on them with minimal work. Picdrome images are AI-generated and free to use for personal and commercial website projects, subject to the Picdrome Image License. Starting from an image that already has a quiet zone saves you most of the overlay tuning above.
When you are choosing a hero background, decide between an image and a flat colour first — background image vs solid color for landing pages works through that — then look only at candidates with obvious open space where your headline will go.
A quick readability check before you publish
Run this short pass on the finished section, in the builder, with your real headline in place.
- View it small. Shrink the browser or look at the live page on your phone. If the words are hard to read at thumbnail size, they are too hard on the page.
- Check both screen sizes. Confirm the text still lands in a calm region after the background crops for mobile.
- Squint test. Squint at the headline. If it holds together, contrast is doing its job. If it smears into the photo, strengthen the overlay or move the text.
- Color check. Make sure your text color suits the region behind it: light text over the dark part, dark text over the light part. If a single color does not work across the whole headline, the region is not even enough.
- Confirm contrast properly if it matters. For a formal contrast check against accessibility targets, test the final text color over the final treated background, as covered in the accessibility guide. Do not assume the photo passes on its own.
The aim of all of this is one thing: text people can actually read, quickly, on any device. A readable headline keeps your message in front of visitors instead of hiding it behind a pretty picture.
In Plain English
What this is: a method for keeping headlines and copy legible when they sit on top of a background photo. You look for an even-toned, low-detail area, add a dark or light overlay (often a gradient) to lift contrast, and place the text in that calm part of the frame.
Who it helps: anyone building a hero, landing section, or banner who has watched their headline disappear into a photo.
When to use it: any time text goes over an image. The decision starts at the moment you pick the background, not after the words vanish.
What to do next: start from an image with built-in text space, favouring the gradient and abstract backgrounds that are calm by design, add an overlay only as strong as you need, place your copy in the quiet zone, and run the five-step readability check before publishing. For the wider set of image decisions around this one, head back to the beginner's guide to using images on your website.