デザイン性が高いWEBサイトを作る際、
背景に写真を画面サイズいっぱいに固定して表示し、コンテンツのみスクロールさせるという方法があります。
この方法の場合、ページ全体がスクロールされるよりもコンテンツの動きが大きく見えるようになるため、テキストや写真への注目を集めることができます。
通常、要素の背景に画像を設置する時は、CSSの「background-attachment」プロパティを使って指定します。
ここでは、具体的な設定の仕方を紹介していきます。
背景を固定しない場合のサンプル
まずは、背景を固定しない普通の背景画像の設定方法を見ていきましょう。
以下はサンプルになります。
テキスト
HTML
背景に画像を表示させるCSS
背景を固定する場合のサンプル
次に、背景を固定する方法を見ていきましょう。
背景を固定するには、CSSのbackground-attachmentプロパティへの設定を行う必要があります。
以下はサンプルです。
テキスト
HTML
背景に画像を表示させるCSS
