Ask most owners what the top of their homepage should look like and the answer is much the same: one strong photo across the full width, a short headline on top of it, and a button. You add an image, type a heading underneath, and it looks nothing like that. Or you find a block that puts text over a photo, and now the white headline vanishes into a bright sky.
The tool for this is the WordPress Cover block. It places text, buttons or any other blocks on top of an image, a video or a plain colour, and it is what most people mean when they ask for a hero image. This post walks through building one that stays readable, crops sensibly on a phone and does not fight your theme.
Check these before you start
A few minutes of checking saves you from building a hero that your site cannot show properly.
- Which editor builds the page? If the homepage was made with Elementor, Divi or another page builder, the hero is a builder section, not a Cover block. The ideas below still apply, but the controls are the builder’s own.
- Where should the hero live? On a block theme, a hero that appears only on the homepage belongs in the page itself. If you want it on every page, it is part of a template, edited under Appearance → Editor. On a classic theme, you will usually add it inside the page content, because the header is controlled by the theme.
- Does the theme allow full width? The Cover block can stretch edge to edge only if your theme supports wide and full alignment. Most current themes do. If the full-width option is missing from the toolbar, the page template may be the limit; a “full width” or “no sidebar” template often fixes it.
If you are new to how images and files sit in WordPress generally, our guide to images and media in WordPress covers the Media Library and image sizes first.
How to add a WordPress Cover block
- Open the page in the block editor and click where the hero should go, usually right at the top.
- Click the + inserter, search for “Cover” and choose it.
- The empty block offers Upload, Media Library, and a row of colour swatches. Pick your image from the library or upload a new one. A video file works here too.
- Click the text placeholder inside the block (in recent versions it reads “Write title…”) and type the headline. Press Enter to add a paragraph or use the inserter inside the cover to add a Buttons block.
- In the block toolbar, choose Full width or Wide width from the alignment control if you want it to stretch.
- Use Preview to view it on desktop and mobile before you save.
One thing confuses people here: the Cover block is a container. The headline and button inside it are separate blocks with their own settings. If you click the heading and look for the overlay setting, you will not find it. Click the cover’s background, or use the List View, to select the Cover block itself.
Overlay and text contrast
This is where most hero sections go wrong. White text on a busy or bright photo is hard to read for everyone, and for visitors with weaker eyesight it may be unreadable. The overlay is a coloured layer between the photo and the text, and its opacity decides how much it darkens or tints the picture.
Select the Cover block and open its settings in the sidebar. Depending on your WordPress version, the overlay colour and the overlay opacity sit under the block’s Styles tab or in the main settings. Then:
- For white text, choose a dark overlay, black or a deep brand colour, and raise the opacity until the headline reads easily at a glance.
- For dark text, use a light overlay instead, though dark text on photos is harder to pull off.
- Look at the result on your phone, outdoors if you can. Glare makes weak contrast much worse.
- Keep the text short. A headline of a few words and one line of support reads well over an image. A paragraph does not.
For an objective check, our accessibility checklist for small businesses explains the contrast guidance audits use. A solid colour Cover with no image is also a perfectly good hero: always readable and quick to load.
Picking the right image for a hero
A hero photo has a harder job than a photo in a page, because text sits on it and its shape changes from screen to screen. What tends to work:
- Wide, with space. A horizontal shot with a quiet area, a wall, sky, a blurred background, where the text can sit.
- The subject away from the centre. If your product or your team is dead centre, the headline lands on their faces.
- Large enough, but not huge. It needs enough pixels to look sharp across a wide screen, but a camera original of many megabytes slows the first view of your site. Resize before uploading; our post on cropping and resizing images in WordPress shows how.
- Your own business where possible. A real shopfront or real work says more than a stock skyline.
The hero is usually the first large thing a visitor’s browser has to download, so its weight matters more than any other image on the page. That is a speed topic in its own right, and our piece on lazy loading and the hero image mistake explains the one setting that commonly slows it down.
Focal point and height on mobile
The Cover block fills its area with the image and crops whatever does not fit. On a wide monitor you see a letterbox strip of the photo. On a phone held upright the same block is narrow and tall, so the sides are cut off. If the important part of the photo was near the edge, it disappears.
Set the focal point
In the block settings you will find a Focal point control: a small version of the image with a dot on it. Drag the dot onto the part that must stay visible, a face, the product, the sign over your door. WordPress then crops around that spot instead of the middle. Check the phone preview again after moving it.
Choose a sensible height
Under the dimensions settings there is a Minimum height field, with a choice of units such as pixels or a share of the screen height. The toolbar also has a full-height toggle that makes the cover fill the whole screen.
Full-screen heroes look dramatic on a laptop. On a phone they can push your actual message, phone number and button below the first screen, so the visitor sees a picture and nothing to do. A moderate minimum height is usually the better choice for a business site. The block grows taller on its own if the text needs more room, so you will not cut off your headline by setting it lower.
Fixed background and phones
The Fixed background option makes the image stay still while the page scrolls over it. It is a pleasant effect on desktop, but many phone browsers ignore it or show it badly. Test it on a real phone before keeping it, and do not rely on it to make the design work.
Cover block or Media & Text?
If the text is long, or the photo is a product or a person you want shown whole, text over an image may be the wrong pattern. The Media & Text block puts the image beside the text instead, which keeps both clear. Our post on the Media & Text block for an image next to text covers that layout. Use the cover for one strong message; use Media & Text when you need to explain something.
When the hero misbehaves
- The text box is in the wrong place. The cover toolbar has a content position control, a small grid of nine spots. Pick top left, centre or bottom as you need.
- You replaced the image by accident. Use Undo (Ctrl+Z, or Cmd+Z on a Mac) straight away, or restore an earlier version from the page’s revisions after saving.
- The hero looks different on the live site. A caching plugin may be showing an older copy. Clear the cache and check in a private window.
- The theme adds its own hero as well. Some themes have a page title banner or a header image setting. If you now see two banners, turn off the theme’s one in its page or Customizer options rather than deleting your block.
Two habits that spoil a hero
Putting the most important information only inside the image is the big one. Text baked into a photo cannot be read by search engines or screen readers, and it shrinks to nothing on a phone. Type it as a real heading inside the cover.
Also avoid stacking several Cover blocks as a makeshift slider, and changing the hero every week. Visitors learn to recognise it; let it settle.
The hero is one page element among many. Our overview of how to manage a WordPress website lists where the rest of the job, from settings to users, is covered.
Frequently asked questions
Can I add alt text to a Cover block image?
Recent versions of WordPress include an alternative text field in the Cover block settings when the background is an image. Describe the photo if it carries meaning, such as your shopfront. If it is only decoration behind the headline, leave it empty so screen readers skip it and go straight to the text you typed.
Why does my Cover block image look blurry?
Usually the image was too small for the space. A photo a few hundred pixels wide stretched across a large monitor will look soft. Upload a larger version and replace the background with it. A heavily compressed file can also look rough, so compress gently.
Can I use a video instead of a photo in the hero?
Yes. The Cover block accepts a video file from the Media Library and plays it silently in a loop behind your text. Keep it short and light, choose an overlay so the text stays readable, and check how it looks on a phone, where some visitors will see it slowly or not at all.
Can I make the Cover block a clickable link?
The block itself has no single link setting. Add a Buttons block inside the cover for the action you want, such as a call or a contact page. A clear button is easier to notice and tap than an entire banner, and it tells visitors exactly what will happen.
A hero that behaves oddly, a second banner you cannot remove, or a block that ignores full width usually points to the theme or the template rather than to anything you did. Untangling that sort of theme conflict is part of what our WordPress support service does.
Next in this series: How to Add a Gallery in WordPress With the Gallery Block
