How to Add Text on Top of an Image in WordPress: 3 Methods

Adding text overlay on images in WordPress can enhance your website’s visual appeal, improve message clarity, or create engaging banners and call-to-actions. Whether you want a simple caption, a styled overlay, or a custom design, there are multiple ways to achieve this. This guide walks you through three practical methods, suitable for beginners and experienced users alike. Before starting, ensure you have access to your WordPress admin dashboard, and if you plan to customize styles, basic knowledge of CSS can be helpful.

What You’ll Need

Access to your WordPress admin dashboard
Images you want to add text to (preferably uploaded to your media library)
Optional: a page builder plugin (like Elementor or Beaver Builder) if you prefer visual editing
Optional: custom CSS knowledge for advanced styling

Step-by-Step

Method 1: Using the Built-in Cover Block (Gutenberg Editor)
1. Navigate to the post or page where you want to add the image with overlay text.
2. Click “Add Block” (+ icon) and select the “Cover” block from the block options.
3. Upload a new image or select one from your media library.
4. Once the image appears, you’ll see an option to add overlay text directly within the Cover block.
5. Type your desired text into the overlay area. You can customize the text’s font, size, and alignment using the block toolbar.
6. Adjust overlay opacity and background overlay color if needed, using the block settings in the right sidebar.
7. Publish or update your page to see the text over the image live.
Method 2: Using an Image with Caption and Custom CSS
1. Upload your image to the media library or add it directly into your page/post editor.
2. Insert the image into your content area, then add a caption below or over the image.
3. To overlay text, wrap the image and caption in a custom container or use a grouping block (if using Gutenberg).
4. Add a custom CSS class to this container (e.g., class=”image-overlay-container”).
5. In your WordPress theme or custom CSS file, add CSS similar to:
```
.image-overlay-container { position: relative; display: inline-block; }
.image-overlay-container img { display: block; }
.image-overlay-container .overlay-text {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 color: white;
 background: rgba(0, 0, 0, 0.5);
 padding: 10px;
 font-size: 20px;
 }
```
6. Add a div with class=”overlay-text” inside your container, containing your overlay message.
7. Update your page/post. The text should now overlay the image with custom styling.
Method 3: Using a Page Builder Plugin (e.g., Elementor)
1. Install and activate your preferred page builder plugin, such as Elementor.
2. Edit the page with the page builder interface.
3. Drag an “Image” widget into your section or column.
4. Select or upload your image.
5. Overlay a “Heading” or “Text Editor” widget on top of the image by dragging it into the overlay area or using the built-in overlay options.
6. Configure the overlay text, style it with colors, fonts, and positioning options provided by the plugin.
7. Adjust the z-index and positioning to ensure the text appears on top of the image.
8. Save your changes and preview the page to verify the overlay appears as desired.

Common Mistakes

Forgetting to set position: relative on the image container when using CSS overlays, which prevents proper positioning of overlay text.
Using transparent or low-contrast text that’s hard to read against the image background.
Not optimizing images for web, leading to slow load times and layout issues.
Overlapping elements without proper z-index management, causing text to be hidden behind images or other elements.
Failing to preview on different devices or screen sizes, resulting in poor responsiveness.

Tips

Use contrasting colors for overlay text to ensure readability.
Make your overlay text responsive by using relative units like em or rem, or media queries.
Leverage built-in block options or plugins to avoid complex CSS if you’re not comfortable with coding.
Compress images before uploading to improve page load times.
Test your overlay on mobile devices to ensure it looks good across all screens.

Troubleshooting

Text not appearing over the image: Check if the overlay container has position: relative, and the text has position: absolute. Also, verify the CSS class names are correctly assigned.
Overlay text is cut off or misaligned: Adjust the positioning, padding, or transform properties in your CSS. Use browser developer tools to inspect and tweak styles live.
Image loads but overlay doesn’t show: Ensure your overlay text div is correctly nested inside the container and visible (not hidden or with display: none).
Design looks broken on mobile: Use media queries to adjust font size, overlay position, or hide overlay on small screens if necessary.

Frequently Asked Questions

Can I add multiple lines of text on top of an image?: Yes, you can add multiple paragraphs or headings within the overlay container, styled as needed for your design.
Is it possible to add a button or link over an image?: Absolutely. You can include HTML buttons or links inside the overlay text area or use plugins that support overlay elements.
How do I make the overlay text responsive?: Use relative units like % or em/rem for font sizes and positioning, and test on various screen sizes. Media queries help optimize the layout.
Can I animate the overlay text?: Yes, with CSS animations or JavaScript, you can add fade-ins, slides, or other effects to your overlay text for more engagement.
Is it better to use a plugin or custom code for overlays?: For simplicity and ease of use, plugins and page builders are recommended. Custom code offers more flexibility but requires coding knowledge.

This comprehensive guide provides practical methods, tips, and troubleshooting advice to help you effectively add text on top of images in WordPress, enhancing your site’s visual storytelling and engagement.

How to Add Text on Top of an Image in WordPress: 3 Methods

How to Add Text on Top of an Image in WordPress: 3 Methods

What You’ll Need

Step-by-Step

Common Mistakes

Tips

Troubleshooting

Frequently Asked Questions

Related