【CSS】スクロール時に要素の背景画像を固定する方法

こんにちは、Ryohei（@ityryohei）です！

スクロール時に要素の背景に設定した画像を固定して、動いていないように見せることができるCSSテクニックのご紹介です。

要素に設定した背景を固定させる方法は、数年前に登場したパララックス効果を実装する場合によく用いられます。通常ではページをスクロールとスクロールバーと連動する形で背景に設定した画像もスクロールされていきますが、CSSのプロパティを一つ追加することで簡単に背景を固定することができます。

本記事の内容

• background-attachmentとは
• 通常時の背景のスクロール挙動
• 固定時の背景のスクロール挙動

では、解説していきます。

background-attachmentとは

CSSのbackground-attachmentは、背景画像の挙動を指定することができるプロパティです。デフォルトでは、背景画像はコンテンツと一緒にスクロールする仕様となっているため、基本的に背景画像を固定する際に指定するプロパティになります。

下記は、background-attachmentに指定することができる値になります。

fixed	背景画像を固定します。 「background-clip: text 」と一緒に指定することはできません。
scroll	背景画像も一緒にスクロールします。
local	背景画像は指定要素の領域に固定されます。指定した領域がスクロール可能であれば、コンテンツと一緒に背景画像もスクロールします。

background-attachmentの使い方はとても簡単です。下記のように背景画像の挙動を指定した要素にプロパティと値を指定するだけで動作します。

div {
  background-attachment: fixed;
}

続いて、通常時と固定時の背景画像の動きについて確認していきたいと思います。

通常時の背景のスクロール挙動

通常時の背景のスクロールの確認です。背景に画像を設定して、縦横をビューポートいっぱいに表示しています。スクロールすると画像も一緒にスクロールされているかと思います。

HTML

<div style="background-image: url(https://into-the-program.com/demo/images/sample001.jpg);"></div>

CSS

div {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
}

DEMO

See the Pen
background-attachment01 | CSS by ryoy (@intotheprogram)
on CodePen.

固定時の背景のスクロール挙動

続いて、background-attachmentでfixedを指定した状態です。スクロールした際に背景画像がビューポートで固定されているかと思います。実際の動きにつきましては、DEMOにてご確認いただけます。

HTML

<div style="background-image: url(https://into-the-program.com/demo/images/sample001.jpg);"></div>

CSS

div {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed; //固定時に追加するプロパティ
}

DEMO

See the Pen
background-attachment02 | CSS by ryoy (@intotheprogram)
on CodePen.

最後に

background-attachmentを使うことで、スクロールの挙動を簡単に変えることができます。マスクをかけて背景画像を部分的に表示させたり、画像を全面に押し出して商品を印象づけるなど、様々な場面で役に立つプロパティです。

背景画像を固定するには「background-attachment: fixed;」を使う！　と覚えていただければ幸いです。

以上、CSSでスクロール時に要素の背景画像を固定する方法のご紹介でした！