WordPressのカスタマイズで「背景画像の設定」を行った際、PCやAndroidでは想定通りに表示されるが、iPhoneで見たときに「全然想定と違う」といったことはありませんか？
当方も軽く陥った問題なので備忘録として記事にさせていただきます。
background-attachment: fixedがスマートフォンだけ効かない原因
background-attachment: fixedがスマホだけ効かないのは、
background-attachment: fixed;とbackground-size: cover;を同時に指定しているからです。
これらの同時指定は、iOSで問題が起きてしまうようです。
iOSで問題が起きるということは、iPhoneやiPadでは指定が無効になってしまうということですね。
iOSでも背景固定をしたいときの解決法
iOSでも背景固定をしたい場合、背景を固定するのではなく、ベースとなる親要素へ疑似要素と指定し、その疑似要素を固定表示させることで実現できます。
backgroundを使用するのではなく、positionを使用する方法です。
See the Pen iOSで『background-attachment: fixed』が効かないときの解決法 by raQoon (@raQoon) on CodePen.
ポイント
・固定表示する疑似要素の重なり順を『z-index:-1;』にすること
・固定表示する疑似要素の高さを『height:100vh;』にすること
これらの指定を忘れないようにしましょう。
まとめ
最近はデザインのこだわりから背景固定の仕様が増えており、それを望むクライアントが多くなっている印象です。PCで出来ている動きや表示をスマートフォン（iOS）でも同じように再現することも必要となっています。
困った時用にこのページをブックマークしておくことを推奨します。
