【CSS】スクロール時に背景画像が切り替わるパララックスの作り方!iPhone対応も解説

シュウ

公開日: 2020.03.09 / 更新日: 2026.10.07
今回は「【CSS】でスクロール時に背景画像が切り替わるパララックス」について
分かりやすく解説いたします！

こんな方に読んでほしい

動きのあるWebサイトを作りたい方
スクロールに合わせて背景画像が切り替わる、印象的なデザインを実装したい方です。
CSSだけでパララックスを実装したい方
JavaScriptやプラグインを使わず、手軽に実装できる方法を知りたい方です。
iPhoneで背景が動かず困っている方
PCでは問題ないのに、iPhone（iOS）で背景がうまく固定されない原因と対処法を知りたい方です。

まずはデモサイトをご用意しました。
実際の動きを、こちらで1度ご確認ください。

デモサイトはこちら

[記事の内容]

パララックスとは

パララックスとは、日本語で「視差」という意味です。
Webサイトを閲覧する際に、背景画像が固定されたまま、コンテンツだけがスクロールで流れてくる動きを見たことはありませんか？
今回は、その動きをCSSで実装します。

メリット

実装が簡単：CSSのプロパティを指定するだけで、背景を固定できます。
見た目に動きが出る：スクロールに合わせて背景が切り替わり、印象的なデザインになります。
プラグインが不要：JavaScriptなしでも実装でき、管理もしやすくなります。

パララックスサンプル1

最初は、背景画像の間にコンテンツを挟む、基本的なパターンです。
完成イメージは以下のようになります。

See the Pen
bGdabmr by shu (@shu0325)
on CodePen.

まずは、HTMLの書き方は以下のようになります。

<!--固定背景01-->
<div class="cd-fixed-bg cd-bg-1">固定背景01</div>

<!--コンテンツ-->
<div class="area">
  <p>【CSS】でスクロール時に背景画像が切り替わるパララックス</p>
  <h2>SHU BLOG</h2>
</div>

<!--固定背景01-->
<div class="cd-fixed-bg cd-bg-1">固定背景01</div>

●①cd-fixed-bg cd-bg-1: 背景画像が固定される要素です。cd-fixed-bgが共通の設定、cd-bg-1が1枚目の画像の設定です。

●②area: スクロールで流れてくるコンテンツ部分です。背景画像の間に配置します。

●③2つ目のcd-fixed-bg: コンテンツの下にも背景を配置することで、コンテンツが背景に挟まれた状態になります。

次に、CSSの書き方は以下のようになります。

/*--画面全体の設定--*/
body,
html {
  height: 100%;
  margin: 0 auto;
}

/*--コンテンツ設定--*/
.area {
  background-color: #ffffff;
  overflow: hidden;
  width: 100%;
  padding: 5% 0;
}

/*--固定背景の設定--*/
.cd-fixed-bg {
  position: relative;
  min-height: 100%;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 2;
}

/*--固定背景01--*/
.cd-fixed-bg.cd-bg-1 {
  background-image: url('画像パス');
}

●①body, html: height: 100%;を指定し、背景要素が画面の高さいっぱいに表示されるようにします。

●②.area: コンテンツ部分の背景を白にして、固定された背景画像を覆うように表示します。

●③background-attachment: fixed;: 背景画像を画面に固定し、スクロールしても動かないようにします。パララックスの中心となる指定です。

●④background-size: cover;: 背景画像が、要素全体を隙間なく覆うように拡大・縮小して表示します。

●⑤background-image: 表示する背景画像のパスを指定します。画像パスの部分は、ご自身の画像に変更してください。

スクロールすると、背景画像は動かないまま、下に配置された.areaが上に流れてきます。
その結果、背景画像がコンテンツ越しに見えたり、隠れたりするパララックスの動きになります。

パララックスサンプル2

次は、コンテンツを先頭に配置し、背景画像を2枚に増やしたパターンです。
完成イメージは以下のようになります。

See the Pen
wvapBKZ by shu (@shu0325)
on CodePen.

まずは、HTMLの書き方は以下のようになります。

<!--コンテンツ01-->
<div class="area">
  <p>【CSS】でスクロール時に背景画像が切り替わるパララックス</p>
  <h2>SHU BLOG</h2>
</div>

<!--固定背景01-->
<div class="cd-fixed-bg cd-bg-1">固定背景1</div>

<!--コンテンツ02-->
<div class="area">
  <p>【CSS】でスクロール時に背景画像が切り替わるパララックス</p>
  <h2>background02</h2>
</div>

<!--固定背景02-->
<div class="cd-fixed-bg cd-bg-2">固定背景2</div>

●①コンテンツ → 背景の順に配置: areaを先頭にして、その下にcd-bg-1を配置します。

●②cd-bg-2を追加: 新しくcd-bg-2を指定し、2枚目の背景画像を表示します。

次に、CSSの書き方は以下のようになります。
共通の設定は、サンプル1と同じです。

/*--一部省略--*/
/*--固定背景の設定--*/
.cd-fixed-bg {
  position: relative;
  min-height: 100%;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 2;
}

/*--固定背景01--*/
.cd-fixed-bg.cd-bg-1 {
  background-image: url('画像パス');
}

/*--固定背景02--*/
.cd-fixed-bg.cd-bg-2 {
  background-image: url('画像パス');
}

●①.cd-fixed-bg: すべての背景に共通する設定です。固定や表示サイズなどを、まとめて指定します。

●②.cd-bg-1: 1枚目の背景画像を指定します。

●③.cd-bg-2: 2枚目の背景画像を指定します。クラス名と画像を増やすだけで、背景の枚数を増やせます。

パララックスサンプル3

最後は、背景画像を4枚連続で配置し、それぞれにタイトルを表示するパターンです。
完成イメージは以下のようになります。

See the Pen
PoqEOMB by shu (@shu0325)
on CodePen.

まずは、HTMLの書き方は以下のようになります。

<!--固定背景01-->
<div class="cd-fixed-bg cd-bg-1">
  <h2>TITLE01</h2>
</div>

<!--固定背景02-->
<div class="cd-fixed-bg cd-bg-2">
  <h2>TITLE02</h2>
</div>

<!--固定背景03-->
<div class="cd-fixed-bg cd-bg-3">
  <h2>TITLE03</h2>
</div>

<!--固定背景04-->
<div class="cd-fixed-bg cd-bg-4">
  <h2>TITLE04</h2>
</div>

●①背景を連続して配置: cd-fixed-bgを4つ並べることで、スクロールするたびに背景画像が切り替わります。

●②h2タグ: 各背景の中に、タイトルを表示します。

次に、CSSの書き方は以下のようになります。

/*--一部省略--*/
/*--固定背景の設定--*/
.cd-fixed-bg {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  height: 100%;
  padding: 5%;
  color: #fff;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 2;
}

.cd-fixed-bg h2 {
  font-family: 'Impact', sans-serif;
  font-size: 55px;
  text-align: center;
}

/*--固定背景01--*/
.cd-fixed-bg.cd-bg-1 {
  background-image: url('画像パス');
}

/*--固定背景02--*/
.cd-fixed-bg.cd-bg-2 {
  background-image: url('画像パス');
}

/*--固定背景03--*/
.cd-fixed-bg.cd-bg-3 {
  background-image: url('画像パス');
}

/*--固定背景04--*/
.cd-fixed-bg.cd-bg-4 {
  background-image: url('画像パス');
}

●①display: flex;: align-itemsとjustify-contentを組み合わせて、タイトルを背景の中央に配置します。

●②color: #fff;: 背景画像の上でも読みやすいように、文字色を白にします。

●③.cd-fixed-bg h2: タイトルのフォントやサイズを指定します。

●④.cd-bg-1〜4: それぞれの背景に、異なる画像を指定します。

元のコードでは、すべてのdivに対して設定していました。
ページ内の他のdivに影響しないよう、今回は.cd-fixed-bgに限定しています。

iPhone（iOS）でスクロールがうまくいかない現象について

上記の画像のとおり、iPhone（iOS）ではbackground-attachment: fixed;が正しく動作しません。
背景の固定ができないため、今回はスマートフォンの画面幅になった際に、CSSとjQueryで対応します。

CSS スマートフォンに対応

まずはCSSで、スマートフォンのときだけ背景の固定を解除します。
書き方は以下のようになります。

@media screen and (max-width: 736px) {
  .cd-fixed-bg {
    background-size: cover;
    background-attachment: scroll;
  }
}

●①@media screen and (max-width: 736px): 画面幅が736px以下のとき、つまりスマートフォンの画面幅のときだけ適用されます。

●②background-attachment: scroll;: fixedからscrollに切り替え、通常のスクロールをする背景にします。

jQuery スマートフォンに対応

背景の固定を解除するだけでは、パララックスの動きがなくなってしまいます。
そこで、jQueryでスクロール量に合わせて背景位置をずらし、擬似的にパララックスを再現します。
書き方は以下のようになります。

$(function () {
  const $target = $('.cd-fixed-bg');

  function parallaxBkImg() {
    const winTop = $(window).scrollTop();
    const winWidth = $(window).width();

    if (winWidth <= 736) {
      $target.each(function () {
        const offsetTop = $(this).offset().top;
        const position = winTop - offsetTop;

        if (winTop > offsetTop - 800) {
          $(this).css('background-position-y', position * 0.4);
        }
      });
    } else {
      $target.css('background-position-y', '');
    }
  }

  $(window).on('load scroll resize', parallaxBkImg);
});

●①対象の要素を取得: $('.cd-fixed-bg')で、パララックスを適用する背景要素をすべて取得します。

●②画面幅を判定: $(window).width()で画面幅を取得し、736px以下の場合だけ処理を実行します。CSSのブレイクポイントと同じ値にします。

●③背景のずらし幅を計算: スクロール量と要素の位置の差に0.4を掛けて、背景位置のずらし幅を求めます。数値が小さいほど、背景の動きはゆっくりになります。

●④表示範囲に入ったら適用: 要素の上端から800px手前までスクロールしたら、background-position-yを更新します。

●⑤PC表示では元に戻す: 画面幅が広い場合は、background-position-yの指定を解除し、CSSの設定に戻します。

●⑥イベントの登録: ページ読み込み時、スクロール時、画面サイズ変更時に、parallaxBkImgを実行します。

この処理を使うには、jQuery本体の読み込みが必要です。
bodyの終了タグ直前などで、jQueryを読み込んでから記述してください。

デモサイトはこちら

まとめ

今回はこれで以上です。
今回は、CSSでスクロール時に背景画像が切り替わるパララックスを実装する方法を紹介しました。
background-attachment: fixed;を指定するだけで、背景を固定してパララックスを再現できます。
ただし、iPhone（iOS）では動作しないため、メディアクエリとjQueryで対応するようにしましょう。
ぜひ、ご自身のサイトにも取り入れてみてください。

POINT