The cover image block acts more like a heading than it does an image. It allows you to display some short text (usually, a heading) over top of a background image.
The background image can have an overlay to make the text more legible, as well as fixed positioning to create an interesting scroll effect.
Let's take a look at the various styling options of the cover image.
Cover Image Block Alignment
There are two types of alignment you can use with the cover image: block alignment & text alignment.
Changing the block alignment will actually move your cover image in relation to the content surrounding it.
For example, a right block alignment will move your cover image to the right, and whatever blocks you have below that, they will float up to the left side of your cover image.
Cover Image Text Alignment
Text alignment just aligns the text within the cover image block, and the block itself will continue to take up the full width of your content area.
Another cool option with the cover image is the ability to set the image as fixed. This means the image is locked in the background and does not move as the user scrolls down the page. But all other elements on the page scroll normally.
Here's an example:
You can also set the background dimness in increments of 10, from 0-100. The dimness refers to the opacity level of the black overlay that is placed over the image.
Here's an example:
Cover Image Text Options
The text within your cover image will initially be styled by your theme, but you can set a few additional options on your own, as well as link the text within your cover image.
Click the B for bold, the I for italics, and the ABC for strikethrough.
Additional CSS Class
Just like all Gutenberg blocks, you can add an additional CSS class to your cover image as well.
- Multiple CSS classes are permitted
- Separate each class name with a space
Change/Edit Your Image
If you need to change or edit the image you're using for your cover image, simply click the pencil icon to open the WordPress Media modal.
Convert a Cover Image to a Heading
The cover image block can only be converted back into a heading block. This will simply remove the image and return your text into a traditional heading block, as an