背景画像を画面に固定してスクロールさせる表現（パララックスのような見せ方）でよく使われるのがbackground-attachment: fixedです。ところがこの方法は、iPhoneを含むiOS端末ではうまく動作しないという問題があります。この記事では、background-attachment: fixedを使わずに、iOSでも背景画像を固定する回避方法を紹介します。

background-attachment: fixedの問題点

背景画像を固定する一般的な方法は、次のようにbackground-attachment: fixedを指定するやり方です。

.bg-section {
  background-image: url("bg.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

PCブラウザではこれで背景が固定されますが、iPhoneやiPadなどのiOS端末では、このbackground-attachment: fixedが正しく機能しません。背景画像がガタついたり、固定されずに一緒にスクロールしてしまったりします。iOSの描画仕様による制約で、CSSの書き方を工夫してもbackground-attachment: fixed自体では安定して動かせません。

position: fixedを使った回避方法

そこで、background-attachment: fixedの代わりに、背景画像をposition: fixedで固定した専用の要素として配置します。背景を「CSSの背景プロパティ」ではなく「固定配置した実際の要素」として扱うのがポイントです。

HTML

固定する背景用の要素と、その上に乗せるコンテンツを用意します。

<div class="bg-fixed"></div>

<div class="content">
  <!-- スクロールするコンテンツ -->
</div>

CSS

背景要素をposition: fixedで画面全体に固定し、z-indexでコンテンツの背面に配置します。

.bg-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("bg.jpg");
  background-size: cover;
  background-position: center;
  z-index: -1; /* コンテンツの後ろに配置 */
}

.content {
  position: relative;
  z-index: 1;
}

やっていることはシンプルです。背景画像を持った.bg-fixed要素をposition: fixedで画面いっぱいに固定し、z-index: -1でコンテンツの背面へ回します。背景要素自体が画面に固定されているため、その手前にある.contentがスクロールすると、背景だけが固定されて見えます。この方法なら、iPhoneやiPadを含むiOS端末でも背景画像がしっかり固定されます。

それぞれの見え方の比較

実装方法による挙動の違いをまとめると、次のようになります。

• background-attachmentを使わない（通常）：背景はコンテンツと一緒にスクロールします。
• background-attachment: fixed：PCでは固定されますが、iPhone・iPadでは正しく固定されません。
• position: fixed（今回の方法）：iPhone・iPadを含むiOS端末でも背景画像が固定されます。

まとめ

iOS端末でbackground-attachment: fixedが効かない問題は、背景画像をposition: fixedで固定した専用要素として配置することで回避できます。背景をCSSの背景プロパティではなく、固定配置した要素として扱うのがポイントです。iPhone対応で背景固定に困ったときに試してみてください。