How to Overlay an Image in WordPress

If you are enthusiastic about making your website outstanding, you will always work your ass off to beautify it. There are millions of ways out there to make your site a muse, and one of them will be mentioned in our post today: overlaying an image.

Still wondering what it is? Just take it slow, and let us take you out!

What Is an Overlay?

As you can see, I used an image with text and overlay as the heading; that made a big difference from writing a simple text heading. It looks much more stylish and attractive compared to the normal, right?

More importantly, the overlay on the image helps to highlight the text while keeping the background picture visible. You can add an image with text and overlay on posts/pages like that with ease and use it for different purposes. In this post, we will show you how to do it within simple steps.

Got excited yet? Let's get started!

How to Overlay an Image in WordPress

There are two methods you can try to overlay an image over in WordPress: using Gutenberg's cover block and using CSS. While using Gutenberg helps you to build a post/page that includes an image with overlay even from an empty sheet, using CSS will help you to quickly customize images on a pre-built post/page.

Both these two methods are easy to use in some ways, and we will show you how to use them one by one.

Method 1: Using Gutenberg's Cover Block

Go to the page editor of Gutenberg.

Step 1: Insert an Image Using Cover Block.

Click Add block and choose the block type as Cover.

Next, choose a background picture to display on that cover block. You can upload an image or choose an image from your library.

You can also change an image you added previously into a cover image if needed. Click the image, choose Change block style or type, and choose Cover:

In my case, I will choose this beanie as the background and write some random text on it as well.

Also, I can set the width of my image in the settings below. I will just align it center.

Now my cover block is ready with a background picture and text. In default, the Cover block already has an overlay of black color, so we will see how we can edit it in the next part:

Step 2: Customize the cover block overlay

Next, you will proceed with the block settings to make an overlay.

Click on the block > click the Options button (display as a three-dotted button) > choose Show more settings.

The block settings menu now should be ready on the right of your screen. Go to the Overlay section.

It gives you two color options that are Solid and Gradient to overlay your cover image:

We will try both of these options. First, let's try the Solid color overlay.

Solid Color Overlay

Now you can:

• Choose a color from the suggested menu;
• Choose a custom color. You can pick a color in the palette or insert a color code. The custom color displays as below.

I just picked a sweet pink color for my overlay. Besides, I can also change the opacity (the transparency level) of the overlay:

Opacity rate of 30 to 60% is a proper value. If you set the opacity below or above the suggested rate, the overlay might be almost invisible or too bold to see the background. I will keep the opacity rate at 50% as default.

It's all set here! That's how you can simply add a solid color overlay to your cover image.

Now let's move to the gradient color option.

Gradient Color Overlay

A gradient color, as mentioned above, is a scheme of at least two chosen colors. Or simply said, the color of the overlay will respectively and gradually change from the first to the second chosen color (and so on).

Let's see how I make a gradient overlay to understand it better.

First, I changed the color mode from Solid to Gradient. Also, I picked a gradient color set from the suggestion menu. This is how it looks:

As you can see, the overlay consists of 3 control points. Each carries a solid color, and you can move these control points to adjust the color scheme of the overlay.

The default color arrangement upon picking the gradient color is balanced. I will try to adjust it a little bit, and this is how it changes:

Another adjustment you can make is the type of color scheme. You can choose between Linear and Radial type. With Linear type, you can also choose the direction of the overlay.

To master that gradient color option, you will need better artistic sense and also learn how to mix and match colors to make the best combination for the overlay.

Method 2: Using CSS

If you want to add overlay to an image using Classic Editor, using CSS is required. You need to add some CSS. Go to Appearance > Customize > Additional CSS.

For gradient overlay

Add this code for gradient overlay:

.background-gradient {
    position: relative;
}
.background-gradient::before {
    content: '';
    background: linear-gradient(135deg,#0693e3,#9b51e0);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    opacity: .5;
}

For solid overlay:

Add this code for solid overlay:

.background-opacity {
    position: relative;
}
.background-opacity:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    opacity: .5;
    background-color: #000;
}

Note: this code will help you to add the overlay only, not the text on the image.

You can add both if you want to add many images with different kinds of overlay. To define the overlay as Solid or Gradient color, go to the Text editor and add a class to the image you want to overlay:

• Solid: <div class="background-opacity"> … </div>
• Gradient: <div class="background-gradient is-style-default"> … </div>

For example:

That’s how I get it done!

Verdict

Adding overlay to images really helps you to decorate your posts/pages and make a better impression on visitors. It is worth digging in how to make a perfect overlay, so I highly recommend that you should get to work on it right away. You also can make your website more attractive with sliders, popup banner, video background,... I hope that my instruction is clear enough for you, and please feel free to leave questions and comments below if any. Bye!