Back to Support Content and Media Blocks Cover Block

Cover Block

The Cover block displays an image or video that you can add text and other content on top of — great for headers and other banner-style displays. This guide will show you how to use the Cover block to give your post or page a sleek, professional look.

Video Tutorial

Video Transcript

The cover block is a great way to add some visual interest to your pages and posts. It allows you to use an image, video, or solid color as a background, and then add content blocks to the foreground. 

To add a cover block, click the Block Insertor button, and then search for the cover block. Or type a forward slash on a new line, followed by the word “cover.” then press Enter to add the cover block. 

Next, select one of the preset colors from your theme to use a solid color as the background. Or you can upload a background image or select an existing image from your media library, your Google Photos account, or the Pexels Free Photo Library. 

Generally speaking, abstract or decorative images work best, since the full image may not always display, and you’ll likely add some text or other content over the image. 

Once you’ve selected a cover image, you can add any text you like. You can use this, for example, to title a new section of a post, or create a header for a page. But you could also add other blocks, like a quote or a button block. 

To select the parent cover block, click the button on the left side of the toolbar. Then, you can change the width and the alignment of the cover block. 

And you can change the position of the content within the block by selecting one of the content position options. 

If you want, you can toggle the full height option to show the entire cover image. Or you can change the height of the cover block by clicking the handle at the bottom and then dragging it up or down. 

If you’d like to get a little more creative, you can apply a duotone filter to create a two-tone color effect. You can select one of the preset color combinations, or choose the colors you’d like to use for the shadows and the highlights. To remove the effect, click the Clear button. 

And of course, you can always replace this image with another one any time you like. 

From the Options menu, you can show a few additional settings for the cover block. 

First, you can choose how the background image behaves when you scroll up and down the page. A fixed background means the cover image will stay in place while your content scrolls along with your page. If you use a smaller image, you can choose to repeat it like a pattern to cover the entire background of the block. 

If the Fixed Background option is turned off, you can also set the main point of interest, or focal point, within the photo. Click on the picker to drag it to the spot you want, or use the horizontal and vertical position percentages below to set it manually. 

It’s always a good idea to add an alternative text description, which not only gives search engines an idea of what this image is, but also helps your visually impaired visitors to know what the image represents. 

To remove the cover image and use a solid background color instead, click the Clear Media button. 

By default, the cover block adds a gray transparent overlay to darken the background image, but you can choose any color you like, or even a gradient if you prefer. You can also set the opacity of the overlay color. Move the slider to the left to make the overlay color more transparent, or to the right to make it darker and more opaque. 

You can change the padding within the cover block by entering a value here. 

And finally, you can set the minimum height of the cover image in pixels. So it will always be displayed at this height. no matter what size screen your visitors may be using. 

With all these options, the cover block is a great way to add some visual interest to your pages and posts. For more help with the cover block, please visit 

Add the Cover Block

To add the Cover block, click on the + Block Inserter icon and search for “cover”. Click it to add the block to the post or page.


Using your keyboard, you can also type /cover on a new line and press enter to quickly add a new Cover block.

the text "/cover" with a pop-over that includes the cover block icon.
Use the slash command /cover to insert a Cover block

For more, visit our detailed instructions on adding blocks.

Choose an Image

Once you insert the block, you have two options to set an image or video: Upload and Select Media:

  1. Choose Upload to add a new image or video from your device.
  2. Choose Select Media to choose from an existing image or video on your site, Google Photos, Pexels Free Photos, or Openverse.

You can also select the Use featured image option to set the cover as the featured image of your page or post.

Alternatively, you can click on the colored circles to use the respective background color for your cover. You can later change it to any other color in the block settings.

Tips for Choosing an Image

Add Text and Other Content

Now that you’ve selected your image, you can write a title over it. You can use this, for example, to title a new section of a post or page. You can also add other blocks to show on top of the Cover block, such as a Button block or Paragraph block.

Video in the Cover block

This feature is available on sites with our Premium, Business, and Commerce plans. If your site has one of our legacy plans, it is available on the Pro plan.

You can use a video in the Cover block. This works best with videos in .mp4 format, but feel free to upload your videos in other formats. See the list of accepted formats.

Please note that the Cover block will not play any sound from the video file. If you want your video to have sound, use the Video Block instead.

Insert the Cover block as you would normally, but instead of choosing an image, you can choose to add a video. Then, you can select the video you’d like to insert and adjust the width settings of the block as needed.

You’re then ready to add any text or buttons you’d like on top of your cover video.

Select the Cover block

After adding a Cover block, you can select it from the List View to reopen its toolbar and settings panel on the right sidebar:

Selecting a Cover block from the List View.

Block Toolbar

When you click on the block, a toolbar of options will appear above it:

The Cover block toolbar

These options are:


Like many other blocks, you can align the Cover block itself to the left, right, and center from the toolbar. When using the left or right alignment, you can put another block beside the Cover block.

The Cover block also has Wide and Full-width alignment options that are useful for creating unique headers and widescreen effects. These two options are only available if your theme supports this kind of alignment. 

Wide width image above a full-width one, showing that Full extends further out.
Wide will break the bounding column, while full will reach the sides of the page width.

Content Position

Use the Content Position option to adjust where the text and other content sits on the image:

Clicking the Content Position button in the toolbar gives you options to set where any content added to the Cover block aligns.
Moving the content inside the block using Content Position

Full Height Alignment

To set the image to always show the full height, you can set the Toggle Full Height option in the block’s toolbar that appears when you click on it.

Gif showing how to set the Cover Block to full Height
Apply Duotone Filter

The duotone filter option allows you to set image colors from the block toolbar. Think black and white photos, but in any color combo of your choosing. To get started, select the Duotone Filter button in the toolbar, then choose from the examples shown, or set your own colors.

A gif of an image being clicked in the Editor, then applying several different Duotone Filters to see how it looks.

To set your own colors, select the dots within the color bars:

A screenshot highlighting where to click on the Duotone filter setting to set a custom color, on the color bar.

Use the Cover block if you want to automatically display your featured image at the top of your post or page as well.

  1. In your post or page, add a featured image.
  2. Add a Cover block by clicking the + Block Inserter icon or typing /cover on a new line, then press enter.
  3. On the Cover block’s toolbar, click Add Media, then select Use featured image. This will automatically pull in your current featured image and add it to the Cover block.
Use your featured image in a Cover block.
Replace Image

This is another option in the Cover block toolbar that shows up after you’ve added an initial image or video. Choosing Replace will allow you to select a new media file for your Cover block.

Replace the image or video on the Cover block.

Block Settings

You will find additional block settings in the right sidebar when you click on the block. If you do not see the sidebar, you may need to click the Settings icon in the top-right corner to bring up the settings. This icon looks like a square with two uneven columns:

The settings icon in the Editor with a black background and the tooltip "Settings" below it.
Click the Settings icon to open the block settings
Media Settings

Fixed Background

In the block settings on the sidebar, you will see a toggle for a fixed background. A fixed background means the cover image scrolls along with your page. Turning this option off embeds the image in place, so the image doesn’t scroll.

The fixed image means that as you scroll, the frame for the image moves.

This feature, also called a parallax effect, may be disabled on some mobile devices to improve the page’s performance.

Repeated Background

The repeated background option lets you repeat the same image to form a pattern in the Cover block. For example, if you have a small image of a balloon and you want it to repeat multiple times in the Cover block, you can toggle this option on. Here’s what that would look like:

The repeated background toggle is under the Media settings option in the sidebar for the Cover block.
It’s just one image repeated many times using the Repeated background option.


Use a small image to repeat it multiple times. The smaller the image, the more it will be multiplied.

You can use the Repeated background toggle in combination with Fixed background, but Fixed background does not necessarily have to be turned on. Feel free to play around with these options to find what suits your needs.

Focal Point Picker

If the fixed background option is turned off, you will see the focal point picker. This tool lets you identify the main point of interest in the photo and highlight it. Click on the picker to drag it to the spot you want, or use the horizontal and vertical position percentages below to set it manually.

Alternative Text

In the text field, you can write an Alternative Text description, which is important for accessibility and SEO.

Clear Media

To clear the cover image in order to use a solid colored background, use the ‘Clear Media’ option as seen here:

The field for Alternative Text, with an arrow below it pointing to the button that reads "Clear Media"
Select ‘Clear Media’ to remove your cover image

The advanced settings allow you to create an HTML anchor for the current block which can be used to create a hyperlink to it, add additional CSS classes and also add/remove space from top/bottom of the block.

Learn more about HTML anchors here. You can also learn more about adding additional CSS classes to blocks here.

Block Styles

In the block settings sidebar, click on the Styles icon to access the design settings for the block:

An arrow points to the Styles icon that you can click to open up the block styles section.

Text Color

Set the default color for any text added to the Cover block. You will still be able to add custom text colors to any text (paragraph, header, etc) block you add within the Cover block.

Overlay Color

Using the overlay color options, you can add a color overlay to the cover image. By default, this is a gray, transparent overlay, but with the overlay color options, you can switch that color to any other color of your choice.

Add a color overlay and set its opacity.

Overlay Opacity

This slider lets you set the opacity of the cover image’s overlay. Moving the slider up toward 100 makes the overlay darker and more opaque, and moving it down toward 0 makes the overlay lighter and more transparent. At 100, the overlay is completely opaque and the cover image is no longer visible. At 0, the overlay disappears completely, leaving only your image.


If you’re adding a title to your cover image, we recommend making the overlay at least somewhat opaque to make the title easier to read.


Adjust the appearance of the block’s text with the following settings.

If you don’t see the setting, click the three dots to the right of Typography (as shown on the right.) You can then choose the option you want to access:

  • Font size
  • Font family
  • Appearance
  • Line height
  • Decoration
  • Letter case
  • Letter spacing
Typography dropdown menu
Typography in the Block Settings sidebar, with the additional options expanded.

Font size allows you to adjust the size of the text. You can choose from preset sizes like small, medium, and large.

You can also set a specific value by clicking the slider icon directly above the default selections, marked with a 1 in the screenshot below. You can change the units by clicking where a number 2 is marked in the screenshot below. Choices are pixels, em or rem.

Typography font size settings

Font family gives you the option to change the font style used. Choose from a list of fonts in a drop-down menu.

Appearance allows you to change the text’s style between regular and italic, ranging from thin to extra bold.

Line Height sets the spacing above/below the text. If you select zero, be sure to check your site on mobile.

Decoration includes options for underline and strikethrough (if available.)

Letter case allows you to set the text to all caps, the first letter capitalized, or all lower case.

Letter spacing sets the space between each character of the text. You can change the units from the default (pixels) to percentage, em, rem, vw, and vh. Learn more about relative units here.


On certain themes, the block will include a setting for Dimensions, with options for padding or margin.

An arrow points to the + button next to dimensions, revealing clickable options for padding and margin.

Click on the + icon next to Dimensions to select and activate the Padding and Margin dimension settings.

The Padding setting affects the space around the block’s content, inside of its borders.

The Margin setting affects the space outside of the selected block’s borders.

You can type in a custom value in the text field if you want the same spacing all around the block.

For more specific control, click the link icon to set different spacing values for the top, right, bottom, and left of the block.

An arrow points to the link icon next to Padding and Margin, which opens up the controls for top, right, bottom, and left dimensions.

To change the unit for the margin or padding setting, click on PX to display a dropdown with the other supported units: %, EM, REM, VW, and VH.

An animated GIF shows the process of clicking on PX to open up a dropdown of other units.

Block Spacing

The block spacing option allows you to set the space between the blocks added within the Cover block. For example, if you want to have a Heading and a Navigation block, but have some spacing between them, this setting will let you accomplish that.

Minimum Height of Cover

Set the height of the Cover block to a specific value. Click on PX to display a dropdown with the other supported units: %, EM, REM, VW, and VH.

Border and Radius

By default, these settings control the values on all four sides. To make specific adjustments to the top, right, bottom, and left sides, click the link icon.


Use the border settings to add a border line around your content. You can choose the color, the size, and the unit of size (px, %, em, rem, vw, and vh.)


The Radius allows you to give your block’s borders a rounded appearance. Setting the radius to 0 means the block has sharp edges.

Border & Radius settings.

Was this guide helpful for you?

Not quite what you're looking for? Get Help!

Copied to clipboard!