#Overlay two images how to

#Overlay two images how to

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. With Linear type, you can also choose the direction of the overlay. You can choose between Linear and Radial type. I will try to adjust it a little bit, and this is how it changes:Īnother adjustment you can make is the type of color scheme. The default color arrangement upon picking the gradient color is balanced. Each carries a solid color, and you can move these control points to adjust the color scheme of the overlay. This is how it looks:Īs you can see, the overlay consists of 3 control points. Also, I picked a gradient color set from the suggestion menu. Let’s see how I make a gradient overlay to understand it better.įirst, I changed the color mode from Solid to Gradient. Or simply said, the color of the overlay will respectively and gradually change from the first to the second chosen color (and so on). Now let’s move to the gradient color option.Ī gradient color, as mentioned above, is a scheme of at least two chosen colors. It’s all set here! That’s how you can simply add a solid color overlay to your cover image. I will keep the opacity rate at 50% as default. If you set the opacity below or above the suggested rate, the overlay might be almost invisible or too bold to see the background.

Opacity rate of 30 to 60% is a proper value. Besides, I can also change the opacity (the transparency level) of the overlay: I just picked a sweet pink color for my overlay. You can pick a color in the palette or insert a color code.

Choose a color from the suggested menu.

First, let’s try the Solid color overlay. It gives you two color options that are Solid and Gradient to overlay your cover image:

The block settings menu now should be ready on the right of your screen. Next, you will proceed with the block settings to make an overlay.Ĭlick on the block > click the Options button (display as a three-dotted button) > choose Show more settings. Step 2: Customize the cover block overlay 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: Now my cover block is ready with a background picture and text. In my case, I will choose this beanie as the background and write some random text on it as well.Īlso, I can set the width of my image in the settings below. Click the image, choose Change block style or type, and choose Cover: You can also change an image you added previously into a cover image if needed. You can upload an image or choose an image from your library. Next, choose a background picture to display on that cover block. Step 1: Insert an Image Using Cover Block.Ĭlick Add block and choose the block type as Cover. 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.īoth these two methods are easy to use in some ways, and we will show you how to use them one by one. There are two methods you can try to overlay an image over in WordPress: using Gutenberg’s cover block and using CSS. Got excited yet? Let’s get started! How to Overlay an Image in WordPress In this post, we will show you how to do it within simple steps. You can add an image with text and overlay on posts/pages like that with ease and use it for different purposes. More importantly, the overlay on the image helps to highlight the text while keeping the background picture visible. It looks much more stylish and attractive compared to the normal, right? Still wondering what it is? Just take it slow, and let us take you out!Īs 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.