スクロールしても背景画像を固定したままにする、ちょっとおしゃれなサイトを作りたい人はどうぞご覧ください!
スクロール時に背景画像を固定する方法
プラグインを使用せず、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; //初期値。他の要素と一緒にスクロールする。