Skip to main content
Get Started
Documentation/Elements & Controls Reference/Layout and Shared Controls/Shared Controls/Backgrounds and Gradients

Backgrounds and Gradients

Open Design > Background, set base Color, and choose Type. Available types vary; Sections also offer video and slideshow. Overlay adds a layer behind content.

Section Background controls with Color and Type choices visible
Section Background controls with Color and Type choices visible

Image

Choose Image and select the source. Image Size chooses the WordPress file size; Image Settings controls its display:

  • Lazy Load — Defer off-screen loading.
  • Size — Cover fills with cropping; Contain shows the whole image; Auto uses natural sizing; Custom exposes Width / Height.
  • Repeat — Tile horizontally, vertically, both, or neither.
  • Position — Left/center/right with top/center/bottom; custom exposes Custom Position.
  • Attachment — Scroll with the element or stay fixed to the viewport.
  • Unset Image At — Remove at a smaller breakpoint.

Background images do not supply alternative text.

Image Settings showing Cover, Position, Attachment, and Unset Image At
Image Settings showing Cover, Position, Attachment, and Unset Image At

Gradient

Choose Gradient, configure colors/stops and direction/shape. Gradient Animation > Scale sets animated size; Speed sets timing.

Linear gradient editor showing two stops and the gradient on the Section
Linear gradient editor showing two stops and the gradient on the Section

Video

Choose Video, supply its source, and open Video Settings:

  • Fallback Image — When video is unavailable/not played.
  • Play On Mobile — Permit mobile playback.
  • No Loop — Stop repeating.
  • Pause When Out Of View — Pause off-screen.
  • YouTube Privacy Mode — Privacy-enhanced embed where supported.
  • Start Time / End Time — Playback segment.
  • Zoom / Offset X / Offset Y — Scale and position.

Browser/provider autoplay rules still apply.

Section Video Settings with fallback image and playback options visible
Section Video Settings with fallback image and playback options visible

Slideshow

Choose Slideshow, add images, and open Slideshow Settings:

  • Slide Duration — Time per image.
  • Transition Effect — Slide or Fade.
  • Effect Duration — Transition time.
  • Slide Direction — Horizontal or Vertical for Slide.
  • Ken Burns — In or Out for Fade; Zoom / Origin set its scale/origin.
  • Play Only Once — Stop repeating.
Section slideshow images and Slideshow Settings controls
Section slideshow images and Slideshow Settings controls

Overlay

Set Color or image/gradient Type. Images use the same sizing, lazy-loading, repeat, position, attachment, and breakpoint controls; gradients use Gradient / Gradient Animation.

  • Opacity — Transparency.
  • Effects > Filter > Type — Blur Amount for blur; Amount for brightness, contrast, grayscale, invert, saturate, sepia; Rotate for hue rotation.
  • Effects > Blend Mode — How layers combine.
  • Transition Duration — Time for supported background changes.
Background Overlay with a dark color, Opacity, and Effects controls
Background Overlay with a dark color, Opacity, and Effects controls
← PreviousSpacing and SizingNext →Borders and Shadows
On this page
ImageGradientVideoSlideshowOverlay
Video tutorials ↗ Facebook group ↗ Support ↗