Give any screen a background in the Fill section of Screen settings:

• Single-layer background: A color, gradient, image, or video.
• Multi-layer background: For example, an image with a tint.

If you add a dark theme and apply a reusable style, you can set different backgrounds for the light theme and the dark theme.

Image

Upload a .JPG, .PNG, or .WEBP file up to 20 MB. The image scales to cover the entire background.

To swap the background image at runtime from your app code, enable a custom media ID.

Video

Upload an .MP4 or .WEBM file up to 50 MB. The preview shows a still frame — but the video plays on device at runtime.

Toggle Loop to replay the video continuously.

To swap the background video at runtime, enable a custom media ID.

Solid color

Enter a six-digit hex value, such as #FFFFFF, and set opacity from 0 to 100%. A shorter value blocks publishing.

Gradient

Build a multi-stop linear gradient:

• Direction — rotate the gradient from 0 to 360°.
• Stops — to reposition a stop, drag it along the bar. To add a stop, click the bar or next to Stops. To change the position, six-digit hex value, or opacity of a stop, edit its row.
• Opacity — the slider on the layer’s row scales every stop at once, so the fade between them stays intact.

Use a background as a hero image

In flows, you build a hero image from a screen background and a Sliding sheet. The sheet covers the lower part of the screen and rises over the background as the user scrolls.

1. Set the screen’s Fill to Image or Video, and upload the hero image.

   

2. Open the Add element panel and select Layout > Sliding sheet.

3. Set the sheet’s Start position — the share of the screen the sheet covers, measured from the bottom. At the default 55%, the background shows through the top 45%.

   

4. Add your content inside the sheet.

5. To overlay a headline or logo over the hero image, add those elements outside the sheet. They render over the screen background.

6. Change the Start position to resize the sheet, if necessary. You cannot set an absolute height for this element.

Tint a background

Copy set over an image or a video is legible only where the media behind it happens to be dark enough. To even out that surface, stack a semi-transparent layer over the media:

1. In Screen settings, set the Fill layer to your image or video.
2. To add a second layer, click next to Fill. The new layer appears at the top of the Fill section and covers the media.
3. Click the layer’s swatch and select Gradient . To darken only the edge that carries your copy, run the gradient from an opaque stop at that edge to a transparent stop at the other.
4. To set the strength of the tint, drag the slider on the layer’s row.

To change the order of the layers, drag their rows. To remove a layer, click in its row.

Show a different background in dark mode

To show a different background in dark mode:

1. If the flow has no dark theme, add it.
2. Save the background layer as a color style.
3. If the background has a tint, save the tint layer as a color style too.
4. Change the dark value of each style.