Background and overlay

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, so this page covers each background flow and 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 — 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. On an event masthead, a Use Event Media toggle controls whether the event's own image is used as the background.

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:

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

Wherever a video background or media video is used, 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).

Add a colour 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, so 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 colour over the background.
• Effect — applies a visual filter to the background.

Color and Effect can both be on at once.

Colour overlay

Turning on Color reveals:

• Overlay Color — the overlay colour and how see-through it is. You can pick any colour and adjust its transparency; the default of 50%-transparent black is just the starting value.
• Overlay Style — Solid paints one flat colour across the whole background; Gradient fades the colour 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); sets which edge the colour 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 colour 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 sections, turn on Background, then set its Background Color and an Opacity slider (0 to 100%, full by default).

Where to go next