WindowsでもMacでもAndroidでも背景画像が表示できるのに、iPhoneだけで背景画像が表示されないときの解決方法です。

iPhoneにはbackground-attachment: fixed;は使えない

まず結論からですが、iPhoneでは背景画像を固定するbackground-attachment: fixed;は使えません。

そしてbackground-attachment: fixed;を指定すると、なぜかbackground: url;に指定した画像が表示されなくなってしまいます。

たぶんこれが原因です。

background-attachment: fixed;は結構ポピュラーなプロパティかなと思って何も考えずに使ってたんですけど、iPhoneでは使えないんですよねー。

そんなこと分からないよねー。

こういうのウザいよねー。

ということで、じゃあどうやって背景画像を固定させるかってことなんですけど、いろいろ考えて解決方法を作ってみました。

iPhoneでは疑似要素を固定して背景画像を表示させる

背景画像が固定できないiPhoneでも要素は固定できるので、background-attachment: fixed;ではなく、疑似要素を親要素に重ねてposition: fiexd;で固定させちゃうのが良いと思います。

「はぁっ？」って思うかもしれませんが、これが最適解なのではないかなーと思います。本当にマジで。

実際の動作はこんな感じですね。

See the Pen
Untitled by イロイロデザインラボラトリ (@iroirodesignlab)
on CodePen.

iPhoneを持っていたら実機でアクセスしてみてください。

https://codepen.io/iroirodesignlab/pen/qBeVpRR

詳細はCodePenのSCSSを見てもらえれば分かると思いますが、まず親要素は今までのままでだいじょうぶです。

問題はiPhoneなので、メディアクエリを指定した疑似要素を作ります。この方法はAndroidでも表示されるのでデバイスごとにCSSを振り分ける必要はないです。

こんな感じですね。

&:after {
  @media screen and (max-width: 375px) {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url(https://unsplash.it/1280/720) no-repeat center center / cover;
    z-index: -1;
  }
}

position: absolute;で要素を左上に固定して、その疑似要素に対して背景画像を指定します。

で、この固定した疑似要素が他の要素を邪魔してしまうとややこしいので、z-index: -1;でレイヤーを最背面に置きましょう。

これで解決できるはずです。

さいごに

まさかbackground-attachment: fixed;が使えないとは思わずに色々試して結構な時間ハマってしまいました。

こういう「まさか」というのは結構あるので、皆さんハマらないように気をつけてね！