iPhoneでパララックスが崩れる？背景画像拡大問題を解決する方法まとめ

今回は、パララックス効果を実装した際に、PCは問題ないのにiPhoneで見ると何故か背景画像が拡大されて崩れる？問題 に遭遇したので、その原因と今回私が対応した解決方法を記載します。

同じことで悩んでいる方の参考になれば嬉しいです！

問題の概要

Webサイトでパララックス効果を作るとき、以下のように CSS を書くことが多いと思います。

scss

.parallax_content {
    background-image: url(../img/main_img.jpg);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

PCでは問題なく動作し、デバックモードでスマホサイズを確認しても問題ないのに、iPhoneの実機で見ると背景がズーム（拡大）されてしまうことがあります。

iOSで起こる原因

iOS Safari では現状 background-attachment: fixed が仕様上サポートされておらず、
その代わりに背景が勝手にズームされる表示になってしまいます。

これはiOS側の仕様なので、CSSの指定を調整しても直りません。

解決方法

スマホでは次の方法で対応します。

1. スマホ用のメディアクエリを切り分ける

2. background-attachment: fixed を外す

3. 擬似要素 ::before を使って背景画像を表示する

擬似要素を使うことで、スマホでもパララックス風の表現が可能になります。

実装の流れ

PC向けのパララックス設定（通常）

scss

.parallax_content {
    background-image: url(../img/main_img.jpg);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

スマホ向けの対応
以下は、SCSSのメディアクエリ例（mq(sm) は @media (max-width: 768px) などに置き換えてください）。

scss

@include mq(sm) {
    .parallax_content {
        position: relative; // 擬似要素の基準を作る
        background-image: none; // 元の背景画像を消す
        background-attachment: scroll; // fixedを無効化する
    }

    .parallax_content::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(../img/sp_main_img.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        z-index: -1; // 背景を後ろに配置
    }
}

ポイント

✅ 擬似要素の ::before を活用することで、
iOSでも背景画像をパララックス風に見せることができる。

✅ .parallax_content に position: relative を忘れずに。
擬似要素は親要素を基準に配置されます。

✅ メディアクエリは環境に合わせて調整。
例：@media (max-width: 768px) や mq(sm) など。

まとめ

iOSでは background-attachment: fixed が使えない仕様なので、
スマホ用には擬似要素を活用した別のアプローチを取ることが重要です。

今回紹介した方法を使えば、
PCとスマホそれぞれに最適なパララックス表現を作ることができると思います。