【iOS対応】背景を固定する際に「background-attachment:fixed」が効かない問題への対処法

実装の概要

先述のとおりiOS Safariでは background-attachment: fixed が期待通りに機能しないため、背景をスクロールと無関係に固定表示させるには、別のアプローチが必要です。

この実装では、背景画像を ::before 擬似要素に設定し、そこに position: fixed を指定することで、「要素のスクロールとは切り離された背景」を実現しています。具体的には以下のような構成を取ります。

• .container 要素に clip-path: inset(0) を指定し、背景画像が他の領域にはみ出さないよう設定
• .container::before に position: fixed を指定し、固定する背景画像を設定
• 背景を最背面にするために z-index: -1 を使用

巷では .container 自体に background-size: cover を付けないことで回避しようとする方法も見かけますが、それでは根本的な解決にはなりません。また、.container に position: absolute を指定する案もありますが、絶対配置の要素は親要素に依存してスクロールに追従してしまうため、背景を固定したいケースでは適していません。

この方法の要点は、背景画像にposition: fixedを付けて「スクロールに影響されない擬似要素」として切り出している点です。これにより、iOS環境でも背景を安定して固定表示できます。

以下、サンプルコードです。

<p class="text">
  スクロールしてください↓<br>
  スクロールしてください↓
</p>

<div class="container">

  <p class="text">
    【iOS対応】背景の固定を「background-attachment:fixed」を使わずに実装するサンプル
  </p>
  
  <p class="text">
    リンクやテキストはここに入れられます。<br>
    <br>
    リンクやテキストはここに入れられます。リンクやテキストはここに入れられます。リンクやテキストはここに入れられます。
  </p>

  <a href="/" class="">
    リンクやテキストはここに入れられます。
  </a>

</div>

.container {
  clip-path: inset(0);
  width: 100%; // 適宜変更可
  margin: 70vh 0; // 適宜変更可
  padding: 80px 30px; // 適宜変更可
  text-align: center; // 適宜変更可
  &:before {
    content: "";
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://placehold.jp/f5f5f5/dddddd/5000x2000.png?text=image"); // 適宜変更可
    background-size: contain; // 適宜変更可
  }
}

// 適宜変更可
.text {
  color: #111;
  line-height: 1.84;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  margin-top: 50px;
}

// 最低限のノーマライズ
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-break: break-all;
  overflow-wrap: break-word;
  line-break: strict;
  font-family: sans-serif;
}

動作確認用サンプルはこちら：

https://codepen.io/shunminase/full/ByNGPXa

おわりに

本記事では、iOSにおいて background-attachment: fixed が効かない問題に対し、CSSだけで対処する方法をご紹介しました。

構造自体はさほど複雑ではありませんが、「背景がスクロールに影響されないこと」が前提となるデザインでは、有効かつ扱いやすい手法です。

実装時のトラブル回避や検証時の参考になれば幸いです。