デザイン性が高いWEBサイトを作る際、
背景に写真を画面サイズいっぱいに固定して表示し、コンテンツのみスクロールさせるという方法があります。

 

この方法の場合、ページ全体がスクロールされるよりもコンテンツの動きが大きく見えるようになるため、テキストや写真への注目を集めることができます。

 

通常、要素の背景に画像を設置する時は、CSSの「background-attachment」プロパティを使って指定します。

 

ここでは、具体的な設定の仕方を紹介していきます。

 

背景を固定しない場合のサンプル

まずは、背景を固定しない普通の背景画像の設定方法を見ていきましょう。

以下はサンプルになります。

 

テキスト

 

HTML

背景に画像を表示させるCSS

 

背景を固定する場合のサンプル

次に、背景を固定する方法を見ていきましょう。
背景を固定するには、CSSのbackground-attachmentプロパティへの設定を行う必要があります。

以下はサンプルです。

 

テキスト

 

HTML

背景に画像を表示させるCSS

 

 

おすすめの記事