Cover

The Cover block allows adding an image or video with a content overlay. It is well suited to high-profile page sections that need to draw a lot of attention.

A Cover block must include enough color overlay on the image to make all of the text content easily legible. As an alternative, you can add a background color to the text itself and reduce or remove the color overlay on the image. Your primary goal in either case is to make the text readable.

You can also select a solid color background instead of an image or video.

How to Use

1. Select Add block and choose Cover from the list (under the Common Blocks category).
2. The Cover block will populate with an interface allowing you to either select an image (by uploading a new one or choosing from the media library) or choose a solid color.
3. Once you select the image or color (you can change both of these later) the block will fill in with a sample title field. You can enter text, replace it, and/or add different blocks. You can also drag existing blocks into a Cover block.

Additional Options

You can change the color and opacity of the color overlay. Select the image and open the Overlay panel in the block settings sidebar. Choose from the available colors (gradients are not currently supported in the HRS theme) and adjust the Background opacity setting to meet the needs of your design and readability.

You can set the alignment to none, left, right, center, wide, or full. Change the alignment using the block toolbar menu. This will also change the size automatically. You can change the alignment of the Cover’s inner blocks separately from the Cover block itself.

You can move the content block from center middle to any of the corners or edges. Select the Change content position button from the toolbar (it looks like a grid of dots) and choose the position.

You can adjust the image focal point. Select the image and open the Media settings panel. Use the Focal point picker to move the image focal point to center on a particular portion of the background image.

You can adjust the minimum height of the Cover. You can, within the constraints of the inner blocks you’ve chosen, adjust the height of the Cover block. Select the block and open the Dimensions panel in the block settings sidebar. Set the minimum height in pixels.

Examples

Source

This is a WordPress-created core block that is built in to WordPress.