Backgrounds, images, gradients, and overlays

Documentation / Design and styling

First identify where the background belongs. A page header, a body section, a Row surface, and a custom source fragment have different controls and limits.

Native media and surfaces

In Header settings, choose an image or supported header video through the media controls. Their settings include Blend mode and supported image or video filters. Check Image or Video usage only after selecting a valid source.

The header and section panels offer Curtain with None, dark, or bright, plus Curtain opacity. This overlay changes the visible surface; it does not replace missing descriptive text or correct unreadable text automatically.

Block and Row Design settings provides Background choices including None, Auto, Bright (white), and Dark (black). Rows can apply surfaces continuously or as equal-height cards. Choose the target surface before adjusting padding.

Gradients and older properties

Do not assume the managed section panel contains a gradient, texture, or arbitrary background-image editor. The current save and preview logic removes legacy decorative section and header properties. An older page record is not a supported recipe for recreating those effects.

Reviewed custom page or shared shell CSS can express backgrounds and gradients within its validated scope. Such source changes require the supported deployment and appropriate review; they do not become native visual controls.

Check readability and crop

Review the saved header at several widths. Background imagery can crop differently as the viewport changes, and video frames can vary in brightness. Test text and Buttons against the lightest and darkest relevant areas. Verify the page remains understandable when media fails or motion is reduced.

See Media, forms, and integrations for media preparation.