Text and image are two of the most used elements in web design. Oftentimes, web designers incorporate the two elements in a certain section of a web page with a certain layout. One of the common layouts is by placing the text over the image. In WordPress page builder plugins like Elementor and Divi Builder, you can easily achieve such a layout by simply setting an image background to the column where the text belongs to. What about Gutenberg?
Gutenberg also allows you to add columns to help you manage the layout and content of your page. However, the setting options are limited. There is no option to add an image background. Instead, you can only set a solid color background. If you want to have a text over an image, you can use the Cover block. The Cover block can be added into a column or in an independent block.
The Example Use of the Gutenberg Cover Block
The Cover block is one the native Gutenberg blocks. You can use it for a wide range or purpose, but the most ideal use of the Cover block is to create the hero section of a page whereby you can add a heading with an image background. The Cover block supports settings like fixed background and the ability to add overlay color (you can make use of this setting — overlay color — to make your text more visible). If you want it, you can also set the alignment of the Cover block to full-width. Here is the example of the implementation of the Cover block.
How to Add Text Over Image in Gutenberg Using the Cover Block
First, create a new page (Pages -> Add New) or post (Posts -> Add New) using Gutenberg (or edit an existing one). Once the Gutenberg editor opens, add a new block and select Cover. Click the Upload button to upload a new image or click the Media Library if you want to use an existing image on your website library.
Next, you can click on Write title to add your text.
You can set the alignment of the text, set the text to bold or italic, and add a link from the settings bar. While to set the custom size and color, you can go to the settings panel.
Can you add more texts (or other content type) inside the Cover block? Yes, you can. Simply press the Enter key on your keyboard once you are done adding the text. This will add a new block (which you can fill with any block type) inside the Cover block.
Customizing the Cover Block
As mentioned earlier, the Cover block supports full-width alignment, fixed background, and the ability to add overlay color. You can even set the minimum height as well. To make these settings, first, select the Cover block (make sure to select the Cover block, not other blocks inside it).
You can go to the settings panel to set the fixed background, overlay color, and minimum height. While the set the alignment, you can do so on the settings bar.
The Bottom Line
When creating a page using Gutenberg, you can use the Cover block every time you want to add a text with an image as the background. In addition to text, you can also add other block types inside the Cover block. Such button, column, list, and so on. You can customize the content inside the Cover block according to the customization settings offered by each content/block.
While Gutenberg offers no setting options to set the typography (font family, font style, and so on) of the text, you can use plugins like Kadence Blocks which offers more setting options of the text element. In addition, Kadence Blocks also offers setting options to set the margin as well as the padding of text just like page builders do.
