The Background group fills the container with a color, an image or a video, controls how transparent or blurred that fill is, and can change the color of the text printed on top of it.

The fields

The Background group: Background color and Text color swatches (both empty), Text color applies to set to Exclude items, Background opacity (%) 100, Background blur (px) 0, and the collapsed Background Media Parallax group with the Enable parallax switch.
The Background group with its defaults (parallax was switched on here only to show its fields). The Background media field itself sits just below the Container Settings groups.
FieldDefaultPurpose
Background coloremptyA flat color filling the container.
Text coloremptyColor of the section title and intro (and optionally the items) so they stay readable on the background.
Text color applies toExclude itemsWhether Text color also reaches the text inside the component’s items.
Background opacity (%)100Transparency of the background color, from 0 (invisible) to 100 (solid).
Background blur (px)0Softens the background image or video.
Background medianoneAn image, uploaded video or YouTube/Vimeo video that fills the container.
Background Media ParallaxoffScroll effect for a background image; see its own page.

Background color

  • Click the swatch to open the color picker, or type a hex value such as #184D9B. Clear the field to remove the color.
  • The color fills the whole container: padding included, margins excluded. Add padding so that the content does not touch the edge of the colored area.
  • With a border radius, the color is rounded to the same corners.
  • When a Background media is also set, the image or video covers the color; the color is only visible for an instant while the media loads, or through transparent parts of a PNG. Use one or the other.

Text color and “Text color applies to”

A dark background makes the default (dark) text unreadable. Text color fixes that without touching the theme:

  • Pick a color (usually white, #FFFFFF, on dark backgrounds). Leave it empty to inherit the normal page text color.
  • Text color applies to decides how far the color reaches:
    • Exclude items (default) — only the Section Title and Intro Text change color. The items keep their own styling (a card with a white body stays readable).
    • Include items — the text inside the component’s items changes color as well. Use it for components whose items are plain text on the container background, such as a Links list or a Special List.
  • Text color has no effect until you set it; the “applies to” choice alone does nothing.

The full-width feature box on the Component Width page shows the combination: blue background color, white text color, rounded corners.

Background opacity (%)

Three copies of the same photo behind a section title: at opacity 100% and no blur; at opacity 50% where the page shows through and the photo looks washed out; and at 6px blur where the photo is soft and the text easier to read.
Opacity lets the page show through the background; blur softens it.
  • A whole number from 0 to 100. 100 is a solid color; 50 lets half of what is behind the container show through; 0 makes the color invisible.
  • Opacity applies to the Background color. It does not fade a background image or video, and it never affects the text.
  • Typical use: a light tint over a patterned page background (opacity 20–40) so the component stands out gently.

Background blur (px)

  • A whole number of pixels, 0 (default) for no blur. 2–4px softens a photo slightly; 8–12px turns it into an abstract wash.
  • With a Background media, the image or video itself is blurred (and enlarged a little so its edges stay covered). This is the usual way to keep a title readable over a busy photo.
  • Without media, and with a translucent or absent background color, the blur is applied to whatever lies behind the container (a “frosted glass” effect). On a plain page background this is not noticeable.
  • Blur never affects the text or the items.

Background media

The Background media field: No media items are selected, an Add media button, and the hint Optional image or video background for the container. One media item remaining.
The Background media field, below the Background group.
  1. Click Add media. The media library opens; pick an existing item or upload a new one.
  2. Three kinds of media are accepted: an Image, an uploaded Video file, or a Remote video (a YouTube or Vimeo link).
  3. Only one item can be selected. Use Remove next to it to choose another.

On the page:

  • The media is scaled to cover the whole container and is centered; parts of it are cropped when the container’s shape differs from the media’s. Give the container enough padding (top and bottom) so a reasonable part of the picture is visible.
  • Videos play automatically, muted and in a loop, without controls — they are decoration, not content. Keep them short and light; for anything the visitor should watch, use the Video component instead.
  • An image background can be given a scroll effect with Background Media Parallax.
  • Combine with Text color (white) and, if needed, Background blur for readability.

Recipes

LookSettings
Dark band with white headingBackground color #184D9B · Text color #FFFFFF · Exclude items · Padding 32px
Soft highlight behind a componentBackground color #F5F7FA (or a brand color at opacity 15) · Padding 24px · Border radius 8px
Photo hero with readable titleBackground media (image) · Text color #FFFFFF · Blur 4px · Padding 96px top/bottom
Ambient video behind a links gridBackground media (video) · Text color #FFFFFF · Include items · Padding 48px