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

There are a lot of times when you need to add a text overlay to an image in WordPress.

Maybe you’re creating an eye-catching banner for your homepage. Or perhaps you want to add a catchy title to your featured image. We’ve come across this situation ourselves, and adding a text overlay is a great way to make your images more informative and engaging.

If you need help adding text on top of your image in WordPress, then you’re in the right place. We’ve found 3 easy ways to add text on top of images in WordPress, no design skills needed.

When to Add Text Over Images in WordPress

Images can make your WordPress website look more interesting and help to break up large paragraphs of text.

However, sometimes your images may need more explanation. For example, you might add text on top of an image to explain what the image shows and why you’ve added it to your post.

Many WordPress blogs also add text on top of an image to create eye-catching and informative banners and headers.

In this post, we have three beginner-friendly ways of adding text on top of an image in WordPress. If you prefer to jump straight to a particular method, then you can use the links below:

Method 1: Add Text on Top of an Image Using the Cover Block

One way to add text on top of an image in WordPress is by using the Cover block. You can use this block to show any image and then type text over the image. This makes the Cover block perfect for creating hero images, headers, and banners.

To add a Cover block to a page or post, simply click the plus ‘+ Add Block’ button in the Gutenberg block editor.

You can now type in ‘Cover’ and select the right block when it appears.

Here, you can choose the default Cover block. But you can also go with the templated option with the placeholder image and text. With the second option, you can simply replace the existing image and text with your own.

To replace the default image, simply click to select the image. Once you’ve done that, click on the ‘Replace’ button.

If you want to use an image that’s already in your WordPress media library, then simply click on ‘Open Media Library.’ You can then choose an existing image.

If you want to upload a new image, then click on ‘Upload’ instead.

This opens a window where you can choose any file from your computer.

After you choose an image, you can use the block settings to create some interesting and eye-catching effects. For example, you can make the image fixed in place as the visitor scrolls the page or add a color overlay to the image.

If you do use an overlay, then you can change its opacity by using the ‘Opacity’ slider. The opacity setting controls the transparency of the background image.

When you are happy with how the image looks, you are ready to add some text.

By default, the Cover block has a Heading and a Paragraph block where you can add text on top of the image.

To add some text, simply click to select either the Heading or Paragraph block. Then, go ahead and type in the text that you want to use.

When you add text on top of an image, that text can sometimes be difficult to read. This is particularly true for any visitors who have poor vision. To learn more, please see our guide on how to improve accessibility on your WordPress site.

That being said, you may want to style your text so it’s easier to read.

If you are working with a Heading block, then you can also try the different heading styles to see which one is easiest to read.

You can also help your text stand out by using a contrasting color.

To choose a different color, select the ‘Block’ tab in the right-hand menu. Then, go ahead and click on ‘Color’ to expand this section.

Once you’ve done that, click on ‘Text.’ This opens a popup where you can choose a new color for all the text in the block.

Typically, larger text is easier to read.

To make your text bigger, go ahead and click on the field next to ‘Size’ and then type a larger number into this field.

Once you are happy with how your Cover block looks, you can publish or update your page as normal. Now if you visit your WordPress website, you’ll see your text on top of the image.

Method 2: Add Text on Top of an Image Using the Image Block

The Cover block is great for creating banners and headers. However, you can also add text on top of a standard WordPress Image block.

To start, you’ll need to add an Image block to your page or post. To do this, simply click on the plus ‘+ Add Block’ button in the WordPress block editor.

You can then type in ‘Image’ and select the right block to add it to your post.

You can then either upload an image from your computer or click on ‘Media Library’ to choose an image from the WordPress media library.

After choosing your image, you can change its focal point, add an overlay, and change the opacity following the same process described above.

You can also try the different ‘Fixed background’ and ‘Repeated background’ sliders to see what works best for your Image block.

When you are happy with how your image looks, just click on the ‘Add text over image’ button.

This adds an area where you can type in your text.

Depending on your image, visitors may struggle to read your overlay text. Here, it may help to make the text bold or change its color following the same process described above.

You can also make your text bigger.

To do this, find the ‘Size’ section in the right-hand menu. You can then go ahead and click on the different numbers to make your text larger or smaller.

When you are happy with how your text and image look, go ahead and preview your website. Then, click on ‘Save Draft’, ‘Update’, or ‘Publish’ to save your changes.

If you use a block WordPress theme, then you can use Methods 1 and 2 to add text on top of an image in any part of your theme using the WordPress Full Site Editor (FSE).

You can learn more about FSE in our complete beginner’s guide to WordPress Full Site Editing.

Method 3: Create a Custom Page Layout with Text on Top of an Image

The built-in WordPress blocks are a quick and easy way to add text on top of an image in WordPress. However, if you want the freedom to create completely custom page designs, then you’ll need a page builder plugin.

SeedProd is the best WordPress page builder plugin on the market. It allows you to add text on top of any image across your entire website.

You can read our complete SeedProd review for more details.

First, you need to install and activate the SeedProd plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you’ll need to enter your SeedProd license key. You can get this key by logging in to your SeedProd account. Then, click on the ‘Downloads’ tab.

Once you’ve done that, you can copy the key in the ‘License key’ section.

You can now paste this key into your WordPress admin area by going to the SeedProd » Settings page.

Once you are here, go ahead and paste your key into the ‘License key’ field.

Then you simply need to click on ‘Verify Key.’

After that, we are going to head over to SeedProd » Landing Pages and click on ‘Add New Landing Page’.

Your next task is choosing a template, which will be your page’s starting point. No matter what SeedProd template you choose, you can customize every part of the template to perfectly suit your website and branding.

If you prefer to start with a blank canvas, then you can click on ‘Blank Template’.

In all our images, we are using the Tasty Squeeze Page template, which is perfect for getting more subscriber campaigns.

Once you’ve found a template that you may want to use, hover your mouse over it. You can then click on the ‘Preview’ icon.

This will show a preview of the template.

If you’re happy with how this template looks, then go ahead and click on the ‘Choose This Template’ button.

In the ‘Page Name’ field, type in a name for the page.

By default, SeedProd will use this name as the page’s URL. If you want to change this automatically-created URL, then simply edit the text in the ‘Page URL’ field.

When you are happy with the information you’ve entered, click on the ‘Save and Start Editing the Page’ button. This will open the template in SeedProd’s drag-and-drop editor.

In the left-hand sidebar, you’ll see all the blocks and sections that you can add to your page using drag and drop.

Unless you’re using the Blank Template, your SeedProd page will already have some blocks and sections. To edit any of this content, simply click to select the block or section.

SeedProd’s left-hand menu will now show all the settings you can use to customize this block or section. As you can see in the following image, if you click on a Headline block, then you can change the text that shows up in this block.

The easiest way to add text on top of an image is by using one of SeedProd’s ready-made Hero sections.

These sections have a placeholder, full-width background image, with some placeholder text added on top. You can simply replace the default background image and text with your own content.

To get started, click on the ‘Sections’ tab in SeedProd’s left-hand menu.

You can then click on ‘Hero’ to see all of the ready-made hero sections that you can add to your page.

To preview any of these section templates, simply hover over the template and then click on the magnifying glass icon.

To go ahead and add this hero section to your design, just click on ‘Choose This Section.’

Next, you’ll want to replace the template’s stock image with your own image. To do that, simply click on the stock image to select it.

Then, in SeedProd’s left-hand menu, hover over the ‘Background Image’ preview until a trash can icon appears.

You can then go ahead and click on this icon to delete the placeholder image.

Next, click on ‘Use Your Own Image.’ You can then either choose an image from the WordPress media library or use a stock image.

SeedProd gives you easy access to thousands of royalty-free stock images. To take a look through SeedProd’s stock image library, click on ‘Use a Stock Image.’

In the search bar, type in a word or phrase that describes the image you are looking for and click on the ‘Search’ button.

SeedProd will now show all the stock images that match your search term.

When you find an image that you want to add to your design, simply give it a click.

Once you’ve added an image, you are ready to replace the placeholder text.

To do this, click to select the Text block. Then in the ‘Text’ area, simply type in the text that you want to use.

Some of SeedProd’s hero templates have extra content, such as call-to-action buttons.

Want to change this content? Then simply click to select the block and then make your changes in SeedProd’s left-hand menu.

Another option is to delete the block from the hero template.

To do this, simply click to select the block and then click on the trash can icon.

When you are happy with your page design, you can click on the ‘Save’ button.

From here, you can choose to publish the page or save it as a template.

For more details on creating custom page layouts with SeedProd, you can see our guide on how to create a landing page in WordPress.

Bonus Tips to Manage Images and Files in WordPress

Adding text to images is just one way to make your site look better. Want to do more with your pictures? Check out these easy guides:

• How to Easily Lazy Load Images in WordPress
• How to Add Multiple Galleries in WordPress Posts and Pages
• How to Properly Add a Featured Content Slider in WordPress
• How to Add a Border Around an Image in WordPress
• How to Crop and Edit WordPress Post Thumbnails
• How to Easily Add Interactive 360 Degree Images in WordPress

We hope this article helped you learn how to add text on top of an image in WordPress. You may also want to see our guide on how to bulk edit featured images and our expert picks for the best WordPress slider plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.