![]() ![]() 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. Here's a playground on codepen or for you to experiment with. See it on codepen! Disclaimer: I did not make this codepen responsive so it only looks good on desktop. I didn't have to specify a z-index value to my text because it is by default on layer 0, which is above layer -1. ![]() Here, I sent the image to the back by setting the z-index to -1. ![]() The element with the biggest number will be all the way to the front. Positive values throw elements on top of the default layer. The element with the smallest z-index value will be all the way to the back. Negative values of z-index throw elements behind the default layer. The default layer is equal to z-index: 0. The bigger the number, the closer to the front it will be.Įlements are overlayed in ascending order. If you want to put an element over the default layer, then you use positive numbers. The element with the smallest number will go furthest back. If you want to throw something to the back, the z-index will be smaller than 0. Let's say your computer's screen is the back, the real world is the front, and every element on your app without a specified z-index is the default layer. They could be absolute, relative, fixed, or sticky.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |