Background and overlay
Set an image or video background on a block and tune the color overlay that keeps text readable.
Banners, mastheads, sections, and media blocks can sit on top of an image or video and share one overlay model. How you set the background itself differs by block. This page covers each background flow, then the shared overlay.
Set a background
On a Banner (Welcome style)
Start with the Background Media toggle. It is off by default. Turn it on to give the banner its own background.
When it is on, the Use Page Media toggle decides where the background comes from:
- Use Page Media on (the default) reuses the image or video already set on the page or entry. Change the page's main image and the banner follows.
- Use Page Media off lets you choose a different background just for this banner. A Media Type choice appears, with Image or Video, followed by the matching Background Image or Background Video picker.
On sections, groups, rich text, custom sections, and footers
These blocks have a Background Media toggle with a Type choice (Image or Video) and a generic upload picker for the file. A Position option sets how an image fills the block: Cover or Contain.
On mastheads
The masthead falls back to the page or entry image automatically. There is no Background Media toggle to turn on. To use a different background, fill the override pickers. Leave them empty to use the page or entry image instead. On an event masthead, a Use Event Media toggle controls whether the background uses the event's own image.
Each picker lets you upload a new file or choose one from your library. Image pickers show only images. Video pickers show only videos. See Media and files and the media library for managing assets.
Image options
On media-block images and the banner split image, a Fit option controls how the image fills the area:
Prop
Type
Block backgrounds (sections, groups, rich text, custom sections, and footers) offer a Position of Cover or Contain only. On mastheads, the background image fit is a Media Position choice of Cover or Fit.
Video options
On the Banner (Welcome style) background video, the masthead video override, and a Media block video, four toggles appear:
- Autoplay: starts the video on its own (on by default).
- Loop: restarts the video when it ends (on by default).
- Muted: plays without sound (on by default).
- Controls: shows play and volume controls (off by default).
The Background Media video on sections, groups, rich text, custom sections, and footers has no playback toggles. It always plays automatically, muted, and on a loop, with no controls shown.
Autoplay forces mute
Browsers block sound on a video that plays automatically. While Autoplay is on, Muted stays on and you cannot turn it off. If you need sound, turn off Autoplay first.
Add a color or effect overlay
An overlay sits between the background and the text in front of it, usually to keep words readable over a busy image. This overlay model is shared across banners, mastheads, sections, groups, rich text, custom sections, and footer blocks. The same controls appear wherever you set a background.
Set it with Media Overlay, a button set with three choices:
- None: no overlay (selecting it clears the others).
- Color: paints a color over the background.
- Effect: applies a visual filter to the background.
Color and Effect can both be on at once.
Color overlay
Turning on Color reveals:
- Overlay Color: the overlay color and how see-through it is. You can pick any color and adjust its transparency. The default of 50%-transparent black is just the starting value.
- Overlay Style: Solid paints one flat color across the whole background. Gradient fades the color from one edge to clear, so you can darken just the bottom while the top stays open.
- Gradient Direction: Up, Down, Left, or Right (shown only with Gradient). This sets which edge the color starts from. The default is Down.
- Blur: softens the background behind the overlay, from 0 to 20 pixels.
Effect overlay
Turning on Effect reveals an Effect choice:
- Grayscale: drains the color from the background.
- Sepia: gives the background a warm, aged tone.
Content background
On some blocks you can also give the text itself a panel behind it, separate from the block background.
On banners, turn on Enable under Content Background. Then set its Width and Height (each Fit or Fill), a Background Color, and a Text Color.
On the footer Newsletter blocks, turn on Background, then set its Background Color and an Opacity slider (0 to 100%, full by default). This fills the whole block, not just a panel behind the text.
Where to go next
Banner
The Welcome and Split banner styles, where background and overlay are most often used.
Masthead
The page and entry masthead, which shares this same background and overlay model.
Media and files
Upload, tag, and reuse the images and videos you set as backgrounds.
Colour scheme in blocks
Recolor a block's background, text, and buttons together with a coordinated scheme.