対象プラン：全プラン
背景画像を固定したレイアウト作成方法
画像の配置や重ね順を調整することで、スクロールしても背景画像が固定されたレイアウトを作成することができます。
ユースケース
背景画像を固定したレイアウトは、以下のような場合に効果的です。
ウェブサイトに視覚的な奥行きを演出したい場合
ブランドイメージを強調するために背景に常に特定の画像を表示したい場合
コンテンツの視認性を高めつつ、デザイン性も確保したい場合
この記事では、背景画像を固定表示する具体的な手順を説明します。
設定手順
この手順は、デザインエディタ上で操作を行います。
Step. 1 背景画像の配置
画面左側の[追加パネル]を開きます（Mac: ⌘+4、Windows: Ctrl+4）。
[Image]ボックスをドラッグ&ドロップでページに配置します。
画像ボックスを選択した状態で、画面上部のスタイルバーでサイズを変更します。 縦幅：「100vh」 横幅」「100%」
Step. 2 背景画像の設定
画像ボックスを選択します。
画面左上の[配置]にカーソルを当て、[固定]を選択します。
[重ね順]を「-1」以下に設定します。これにより、背景画像が他の要素の背後に配置されます。
背景画像の上に他の要素を追加して、通常どおりレイアウトします。
Tips：配置の[固定]が選択できない場合
[固定]を選択するには、その要素を <div> Base 直下に配置する必要があります。
[レイヤーパネル]を開き、要素の位置を確認してください。直下にない場合は、レイヤーをドラッグ&ドロップして移動させてください。
Step. 3 動作確認
[プレビュー]ボタンをクリックして、ライブプレビューで表示を確認します。 ページをスクロールし、背景画像が固定されていることを確認します。