A transparent overlay is a layer of colour used to change the tone of an image. Adding an overlay to a block’s background is one of the quickest ways to create a striking cover for a landing page or portfolio without uploading a new background image – it tones down the background and makes buttons and text stand out.
Adding a background overlay to a block
- Hover over the block where you want the overlay to activate its control panel.
- Click the Edit image icon, a shortcut to the Appearance tab. You can also click Block settings → Appearance.
- Scroll down to Background settings and tick Add overlay.
- The smart interface automatically sets a recommended overlay opacity for your background image. To change it, adjust the slider.
- Click Save to apply the change.
Remember to publish your site for the changes to show.
To make the background stand out even more, you can add an animated GIF background instead.