background-imageがスマホでも上手く表示出来てるサイトの仕組みが分かりません。

Question

background-image
background-attachment: fixed;
これの表示はPC版ではうまく表示されるのですが、調べていくとスマホ版ではうまくいかないよということが分かりました。
ですが以下のサイトはなぜかうまく行ってます。
https://www.lim-japan.com/
これはどのように表示しているのでしょうか？
検証モードを開くとサイトの背景全体にビル群の画像が表示されてるようでしたが、それ以上のことは分かりませんでした。
(htmlを見ても、どこに背景を入れてるのかが分かりませんでした。)

Answer 1

background-attachment: fixed;

これの表示はPC版ではうまく表示されるのです

おっしゃる通りで、スマホというより、
iOS Safariにて、上記プロパティにはバグがありますので、
上記プロパティと、表示サイズをフルにした時にバグります。

詳しく検証をしていないため、確証ではありませんが、
挙げていただいたサイトはおそらく下記二点のいずれかで実装しているものと思います。

• 擬似要素ないし、背景用の要素を用意し、

position: fixed;と、z-indexを、上手く使い表現している

• JavaScriptにて、常に一定の位置に背景画像がくるようコントロールしている

他にも様々方法がありますが、
代表的な方法は上記二点になります。

参考になれば幸いです。

Comments

[takawork]

かなり参考になりました。実装してみたのですがちょっと上手くいかないところが出てきたので、改めて質問させて頂きました。お時間がある時に回答いただけると助かります。よろしくお願いします。

[miyabi_pudding]

本件が解決したなら、本質問はBA選出などで閉じましょう。

[takawork]

先ほどベストアンサーにしました。ありがとうございます。