---
title: "背景"
description: "フローBuilder でスクリーンを単色、グラデーション、画像、または動画の背景で塗りつぶします。"
---

[**Screen settings**](paywall-layout-and-products#screen-settings) の **Fill** パネルから、任意のスクリーンに背景を設定できます。単色、グラデーション、画像、動画の4種類の背景タイプから選べます。

## 画像 \{#image\}

`.JPG`、`.PNG`、`.GIF`、`.WEBP` ファイルを最大 20 MB までアップロードできます。画像は背景全体を覆うようにスケーリングされます。

:::note
背景画像と動画は、**Safe area** が有効になっている場合でも、ノッチやシステムバーの裏側を含むビューポート全体に広がります。端のコンテンツが切れないよう、重要なコンテンツは端から離して配置してください。
:::

アプリのコードから実行時に背景画像を差し替えるには、[カスタムメディア ID](custom-media#custom-media-id) を有効にしてください。

## 動画 \{#video\}

`.MP4` または `.WEBM` ファイルを最大 50 MB までアップロードできます。プレビューは静止フレームで表示されますが、実機では実行時に動画が再生されます。

**Loop** を切り替えると、動画を繰り返し再生できます。

実行時に背景動画を差し替えるには、[カスタムメディア ID](custom-media#custom-media-id) を有効にしてください。

## 単色 \{#solid-color\}

16進数の値を入力し、不透明度を 0〜100% で設定します。スウォッチから保存済みの[カラースタイル](builder-styling)を選ぶと、ブランドカラーを適用できます — 背景はライトテーマとダークテーマに自動的に追従します。

## グラデーション \{#gradient\}

複数のストップを持つ線形グラデーションを作成できます。

- **Direction** — グラデーションの角度を 0〜360° で回転します。
- **Stops** — バー上をドラッグして位置を調整します。ストップをクリックすると、16進数の値と不透明度を編集できます。