先日ウェブサイトをスマホで確認したところ背景に敷いた画像がぼやけてしまっていて、原因を探ったところbackground-size: coverが効いておらず、背景画像が画面いっぱいではなくて画像のサイズのまま表示されてしまっていました。
というわけで、ウェブサイトをスマホで表示した際にbackground-size: coverが効かない時の対処法について解説します。
background-size: coverが効くように調整
結論を先にいうと、background-attachment: fixedを使ってるとbackground-size: coverが効かなくなります。
ディスプレイサイズに関わらず画像が馬鹿デカく表示されてしまいました。
background-attachment: fixedも効いてなかったので、両方無効化されます。
そして、この現象はiOSでのみ起きているようです。MacでUAを変更しても問題なく両方とも効いてましたし、試してないですけどネットの情報によるとAndroidでも大丈夫らしいです。
この記事執筆現在のiOSはiOS 14です。バージョンが変わって改善されるのかもしれないので、また状況がわかりましたらこの記事に追記しますね。
背景に敷いた画像を画面いっぱいに広げるには
一応補足で、背景に敷いた画像を画面いっぱいに広げるためのソースコードは下記の記事で紹介してます。
ウェブサイトを観る環境が多岐にわたるため、幅と高さをそのディスプレイに応じて最適化するにはこちらの方法が便利ですよ。
最後に
background-attachment: fixedで背景画像を固定する機会って結構多いと思いますので、スマホでの対応にはお気をつけください。
iOS限定の挙動ですし、いずれ解決すると思うんですけどね。