A common header problem is that the heading text does not match the background picture. The text may be hard to read, the important part of the image may be cropped, or the layout may look fine on desktop and broken on mobile. This guide explains why it happens and gives practical fixes you can apply in Elementor, with a small CSS snippet that works on any WordPress theme.
Why the heading and picture look mismatched
- Low contrast: light text over a bright image, or dark text over a dark image.
- Wrong crop: the image is scaled to fill the area, so the subject is cut off on narrow screens.
- Busy image: text sits on top of the most detailed part of the picture.
- Style clash: the colors and fonts of the heading do not suit the image mood.
Fix 1: Add a dark overlay
A semi-transparent overlay is the fastest way to make text readable. In Elementor, select the header container, open Style, then Background Overlay, choose Classic or Gradient, and set a dark color at 40 to 60 percent opacity. Then use white heading text.
Fix 2: Set the image focal point
Open the container background settings and change Position from Default to Custom. Move the focal point to the important part of the picture, such as a face or product. Do this separately for desktop, tablet and mobile so the subject is never cropped out.
Fix 3: Use a different image for mobile
Switch to the mobile view in Elementor and upload a taller, simpler image for phones. A wide landscape photo rarely works on a narrow screen.
Fix 4: Make the heading size responsive
Large headings can overflow or hide the picture on phones. Use a fluid font size so the heading scales with the screen:
.header-heading {
font-size: clamp(1.8rem, 6vw, 3.2rem);
line-height: 1.2;
color: #ffffff;
text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.header-hero {
background-size: cover;
background-position: center;
min-height: 60vh;
}Fix 5: Match colors and mood
Pick the heading color from the image itself, or use your brand color for the button and white for the text. Keep one font family for headings and avoid more than two weights so the header feels consistent.
Fix 6: Align text to the empty area of the image
Place the heading where the photo is calm, such as sky, a plain wall or soft shadows. If the subject is on the right, align the heading to the left, and the reverse.
Quick test before publishing
- Can you read the heading from arm length on your phone?
- Is the main subject of the picture still visible on mobile?
- Does the heading look good in both light and dark mode screens?
- Is the image compressed so the header loads fast?
Need help fixing a header that does not look right? Send me your website link and I will make the heading and picture match professionally.
Related reading
- How to Make a Header in WordPress: Step-by-Step Guide
- Figma to WordPress: How to Convert a Design into an Elementor Website
- Elementor vs Gutenberg: Which Is Better for Your WordPress Website?
Need help? See my WordPress development services.
