【簡単3分】Studioで背景画像を固定する方法！

洗練されたサイトでは、スクロールされても常に背景画像が変わらない仕様になっていることが多いです。

本記事を読んでいるあなたも、下記のような背景画像が固定されているサイトを作りたいのではないですか？

そこで今回はStudioで背景画像を固定する方法について、9枚の画像を用いて具体的に説明していきます。

Studioで背景画像を固定する手順

Studioで背景画像を固定する手順は、下記のとおりです。

それぞれ具体的に説明します。

①：背景画像を配置する

①左メニューの矢印ボタンをクリックします。

②「追加」→「ボックス」→「Image」をクリックして、画像枠を用意します。

③画像枠を選択した状態で、上部メニューの横幅・縦幅を変更します。

④画像枠をダブルクリックして、背景に設定したい画像を選択します。

②：背景画像を固定に設定する

背景画像を設置できたので、次は固定していきます。

①背景画像を選択した状態で、「配置」→「固定」をクリックします。

②また背景画像を選択した状態で、重ね順を「-1」に変更します。

③：コンテンツを通常どおり設置していく

背景画像の設定が完了したので、いつも通りコンテンツをレイアウトしていきます。

現在は下記のとおり、Baseの直下に背景画像が配置されています。

背景画像の下にコンテンツを追加していきます。

ライブプレビューで確認してみると、常に背景画像が固定できていることが確認できます。

Studioで背景固定できないときの注意点

Studioで背景を固定するときは、基本的にBase配下に画像を設置しなければなりません。

なぜならBase直下に配置しなければ、「配置」→「固定」を選択できないからです。

イメージしやすいように、Base直下以外に背景画像を設置してみます。すると「配置」とクリックしても、固定という選択肢がありません。

Base直下に背景画像を置くか・置かないかで、配置の選択肢が変わるということです。

	Base直下	Base直下ではない
配置の選択肢	・相対 ・固定 ・追従	・相対 ・絶対位置 ・追従

「まったく背景画像を固定できない、、、」という方は、まず背景画像がBase直下に配置できているかを確認するようにしましょう。

Studioでのサイト制作は「Terace」にお任せ！