background-attachment: fixed がスマホで効かない問題は ::before で解決! Webページの背景画像を、background-size: cover で background-attachment: fixed にしたいとき、PCブラウザでは意図どおりに表示するのに、iOS Safari ではウマくいかない事態になりました。 調べてみると、iOS Safari では、「background-size: cover」を使ってるとき「background-attachment:fixed」が効かないらしいんです。 出典:Can I use これを解決するためには、擬似要素「::before」で <body> の前に擬似ブロックレベル要素を作り、そこに背景画像を貼るのがイイみたい。自分なりに改良したソースコードをメモります。 height:100vh がベターか
![background-attachment: fixed がスマホで効かない問題は ::before で解決!](https://cdn-ak-scissors.b.st-hatena.com/image/square/fd32409a344b9c7d07075ffaf19a07edd27ebb03/height=288;version=1;width=512/http%3A%2F%2Fwebdesign.practice.jp%2Fwp-content%2Fuploads%2F2016%2F03%2F160308_1eye.jpg)