Backgrounds
Set a background on any screen with the Fill panel under Screen settings. Each layer in the panel is a solid color, gradient, image, or video, and a screen can stack several of them — which is how you tint an image or a video.
A background can also become the hero image. To achieve this effect, put your content in a sliding sheet.
Image
Upload a .JPG, .PNG, or .WEBP file up to 20 MB. The image scales to cover the entire background.
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.
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. Pick a saved color style 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 six-digit hex value and opacity.
- 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
Main article: Sliding sheet
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.
-
Set the screen’s Fill to Image or Video, and upload the hero image.
-
Add a Sliding sheet: > Layout > Sliding sheet.
-
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%.
-
Add your content inside the sheet.
-
To overlay a headline or logo over the hero image, add those elements outside the sheet. They render over the screen background.
-
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:
- In Screen settings, set the Fill layer to your image or video.
- To add a second layer, click next to Fill. The new layer appears at the top of the list and paints over the media.
- 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.
- To set the strength of the tint, drag the slider on the layer’s row.
Drag a layer to move it in the stack, and click to remove it.
