スクロールしても背景画像を固定したままにする、ちょっとおしゃれなサイトを作りたい人はどうぞご覧ください!

スクロール時に背景画像を固定する方法

プラグインを使用せず、HTMLとCSSのみで簡単に実装することができます。
background-attachmentというCSSプロパティを使用します。

サンプルコードをご覧ください。

HTML

HTMLで、背景画像を指定するタグを用意します。

<div class="background"/></div>

CSS

.background {
  background-image: url('../fixed-image.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

HTMLで作成したタグに対して、background-imageプロパティで背景画像を指定します。

そして、background-attachment: fixed;を指定すると、スクロールしても背景画像が固定されるようになります。

たったこれだけで、パララックスデザインを表現することができます!

background-attachment: fixed;とは?

background-attachmentプロパティは、背景画像の位置を表示領域で固定するか、スクロールするかどうかを指定できるプロパティです。

background-attachment: fixed; //スクロール時に固定。
background-attachment: scroll; //初期値。他の要素と一緒にスクロールする。