Cover Block

The Cover block lets you combine media and content into a single, visually engaging section. It’s commonly used for page headers, banners, and call-to-action areas where you want text or buttons displayed on top of an image, video, or color background.

Why use the Cover block

Use the Cover block when you want to:

  • Highlight important content with a strong visual background
  • Create page headers or hero sections
  • Combine imagery with text and calls to action
  • Build full-width or wide sections that stand out

The Cover block helps you create emphasis — pairing visuals and content in a way that feels intentional and cohesive.

How to use the block

Start by adding the Cover block to the page. Learn how to add blocks.

Once the block is added, editors typically:

  • Choose a background (image or color)
  • Add content using inner blocks (headings, paragraphs, buttons, etc.)
  • Adjust content position and layout
  • Apply styles to improve contrast and readability

When adding a background, you can:

  • Upload an image from your computer
  • Select an image from the Media Library
  • Use the Featured Image (if one is set)
  • Choose a background color from the available palette

Block toolbar

The block toolbar appears above the Cover block when it’s selected.

Available options

  • Apply duotone: Apply a color filter to the background image. Also available in the Styles tab
  • Change content position: Control where content appears within the block (for example, top, center, or bottom, with left, center, or right alignment)
  • Full height: Expand the block to fill the full height of the browser viewport
  • Block width: Control how wide the block appears within the layout
  • Replace / Add media: Replace is available when an image is already set. Add media is available when using a background color.

Block settings

Block settings appear in the right sidebar while the Cover block is selected.

Inner blocks use content width

Controls how inner content is constrained within the Cover block. When enabled, content stays within the standard content width. When disabled, inner blocks can span the full width of the Cover block. This is helpful for balancing readability and layout flexibility.

Background image settings

These settings appear when a background image is applied to the Cover block.

  • Fixed background – Keeps the background image fixed in place while the page scrolls.
    • Creates a subtle parallax effect
    • Best used sparingly for visual emphasis
  • Repeated background: Repeats the background image within the block.
    • Useful for patterns or small, tileable images
    • Not recommended for large images
  • Focal point: Sets the visual center of the background image.
    • Helps ensure the most important part of the image stays visible
    • Especially useful on responsive layouts where cropping may occur
  • Position (left / top): Controls the horizontal and vertical positioning of the background image using percentage values.
    • Fine-tunes how the image is displayed within the container
    • Useful when the focal point alone isn’t enough
  • Alternative text: Provides descriptive text for the background image.
    • Important for accessibility
    • Helps screen reader users understand the purpose of the image
  • Resolution – Controls the image size used for the background.
    • Typically set to Full size for best visual quality in Cover blocks
    • Lower resolutions may reduce image quality, especially on large sections

Block styles

In the Styles tab of the right sidebar, you can adjust the visual appearance of the Cover block.

  • Text color: Controls the color of paragraph and general text inside the block.
  • Heading color: Controls the color of heading blocks inside the Cover block.
  • Overlay color: Applies a color overlay on top of a background image. This is often used to improve contrast and readability of text.
  • Overlay opacity: Controls how strong the overlay color appears. Higher opacity increases contrast between text and the background.
  • Duotone filters: Applies a color treatment to the background image. This matches the Apply duotone option in the toolbar.
  • Dimensions:
    • Padding: Adds space inside the block, between the content and the edges.
    • Margin: Adds space outside the block, separating it from surrounding content
  • Minimum height: Sets the minimum height of the Cover block. If not set, the height is determined by the content inside. This setting is useful when you want a larger visual section, even with minimal content.
  • Shadow: Applies a drop shadow to the block.
  • Border radius: Applies rounded corners to the block.

Accessibility and content structure

The Cover block combines visual and content layers, so readability is key.

  • Ensure sufficient contrast between text and the background
  • Use Overlay color and opacity to improve readability when needed
  • Structure content using appropriate blocks (like Headings and Paragraphs)

When used thoughtfully, the Cover block creates strong visual hierarchy without sacrificing accessibility.

Tips for editors

Prioritize readability

Images and videos can be visually rich, but text should always be easy to read. Use overlays, contrast, and simple layouts to support clarity.

Use full height intentionally

Full-height sections can create strong visual impact, but should be used sparingly to avoid overwhelming the page.

Keep content focused

Cover blocks work best with concise content. Avoid large blocks of text — keep messaging clear and direct.

Use for key moments

Reserve Cover blocks for sections that need emphasis, like page introductions or calls to action. Overusing them can reduce their impact.

  1. https://wordpress.org/documentation/article/cover-block/ – Please note that your implementation may include customizations that affect available settings or behavior.