Gutenberg Blocks – Cover Image

Simple Example of Cover Image Block

Very simply, the Cover Image block allows you to include an image with text sitting in front of it, like the image below (where the words “Simple Cover Image Block” are not part of the image but text typed directly into the block in the editor):-

Simple Cover Image Block

The Background Opacity setting on the cover image allows you to make the image darker so that the text is clearer to read.

The block is a <div> tag with class wp-block-cover-image and also has-background-dim. The <div> is given an inline background-image of the chosen image.

The text inside the block has class wp-block-cover-image-text.

Fixed Background Effect

The Fixed Background setting allows you to keep the image fixed on the page, while the visitor scrolls down, giving an interesting visual effect, as below:-

Cover Image with Fixed Background

The additional class has-parallax is used to indicate this setting.

This is not exactly a true parallax effect (in which the image also moves up the page, just more slowly than the text) but it does offer an interesting variation for this type of block.

Hero Header Section

As the name suggests, the Cover Image block can be used as a hero header section for a page or post. 

For this reason, cover images have, by default, a maximum height of 430px, allowing the section to be as wide as desired without becoming too tall and taking up too much screen space. When choosing an image for this kind of block, it is worth bearing in mind that the image may be truncated top and bottom, with the central portion most likely to be visible. Of course, the maximum height may be overridden in the theme or by custom styling.

Some of the settings require explicit support within your WordPress theme. For example, the full width setting must be explicitly supported by the theme in order to display across the full width of the web page (as at the top of this page).

Choosing the full width image setting for a cover image block
Choosing the full width setting for a block

This theme has been specially adapted to use the post’s Featured Image along with the Post Title, in a Cover Image block displayed at the top of the page, as a hero section.

For further reading about cover images, see here