Style a banner

The Cover block includes options to style your banner. In this guide, you will learn how to add an overlay, adjust the aspect ratio, apply a border and shadow, and fine-tune the focal point of banner-style images and videos.

An overlay adds a semi-transparent color layer over the banner image or video, improving readability for text and other content. To add or adjust the overlay settings, follow these steps:

1. Click on the Cover block to select it.
2. In the block settings sidebar, click the Styles icon. It looks like a black and white circle.
3. Under the “Color” section, click the Overlay color to change the overlay color.
4. Adjust the Overlay opacity slider to control the transparency of the overlay color. An opacity of 0 means the image is completely visible. An opacity of 100 means the overlay blocks out the image completely. Depending on your design, an overlay opacity between 25 and 75 works well.

You can control the shape of your banner by adjusting its aspect ratio. To adjust the Cover block’s aspect ratio, follow these steps:

1. Click on the Cover block to select it.
2. In the block settings sidebar, click the Styles icon. It looks like a black and white circle.
3. Locate the Aspect ratio setting.
4. Select a preset aspect ratio from the drop-down menu.

To add a border or a shadow to your Cover block, follow these steps:

1. Click on the Cover block to select it.
2. In the block settings sidebar, click the Styles icon. It looks like a black and white circle.
3. Locate the Border & Shadow section.
4. Adjust the border width, color, and radius using the available controls.
5. You can also enable a drop shadow by clicking the ⋮ icon and enabling the Shadow settings.

Learn more about Border and Shadow settings.

A fixed background (parallax effect) keeps the banner image in place as visitors scroll. Here’s an example:

Follow these steps to create a fixed background image:

1. Add a Cover block.
2. In the block settings sidebar, click the Styles icon. It looks like a black and white circle.
3. Toggle on “Fixed background“.

If you have uploaded a video to your Cover block, it will not have this option.

The Repeated background option repeats the same image to form a pattern in the Cover block. To repeat a background in the Cover block, follow these steps:

1. Click on the Cover block to select it.
2. In the block settings sidebar, click the Styles icon. The Styles icon looks like a black and white circle.
3. Toggle on “Repeat background“.

If you have uploaded a video to your Cover block, it will not have this option.

The focal point determines which part of the image or video stays visible when the banner resizes. This is useful when your cover image is viewed on a small screen like mobile phones when the image can’t be displayed in full. On smaller screens, the image will center around your chosen focal point to ensure the most important part of the image can be seen.

To adjust the focal point, follow these steps:

1. Click on the Cover block to select it.
2. In the block settings sidebar, click the Styles icon. The Styles icon looks like a black and white circle.
3. Locate the Focal point picker (If you are using a fixed background, it will not have the option to set a focal point).
4. Drag the marker to adjust the focus area.

If you uploaded a video as your cover media, you can also set a poster image to use as the video thumbnail.

To apply a wave style to the top or the bottom of your Cover block, follow these steps:

1. Click on the Cover block to select it.
2. In the block settings sidebar, click the Styles icon. The Styles icon looks like a black and white circle.
3. Click the “Bottom wave” or “Top wave” option to apply a wave style.
4. Click Default to remove the wave style.