---
title: "Backgrounds"
description: "Fill a screen with a solid color, gradient, image, or video background in the Flow Builder."
---

Set a background on any screen with the **Fill** panel under [**Screen settings**](paywall-layout-and-products#screen-settings). Pick from four background types — solid color, gradient, image, or video.

## Image

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

:::note
Background images and videos fill the entire viewport, including areas behind the notch and system bars — even when **Safe area** is enabled. Keep important content away from the edges to avoid clipping.
:::

To swap the background image at runtime from your app code, enable a [custom media ID](custom-media#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](custom-media#custom-media-id).

## Solid color

Enter a hex value and set opacity from 0 to 100%. Pick a saved [color style](builder-styling) from the swatch to apply your brand color — the background follows your light and dark themes automatically.

## Gradient

Build a multi-stop linear gradient:

- **Direction** — rotate the gradient from 0 to 360°.
- **Stops** — drag along the bar to reposition. Click a stop to edit its hex and opacity.