Web blog WEBブログ

スマホで『background-attachment: fixed』が効かないときの解決法

2020.05.06

こんにちは。コーダーの兼山です。

背景固定を『background-attachment: fixed;』で指定した際、パソコンでの表示では思う通りの動きをするのに、スマートフォンでは固定されないことがありませんか?

それには理由があります。
今回は、その理由と解決方法について解説します。

background-attachment: fixedがスマートフォンだけ効かない原因

background-attachment: fixedがスマホだけ効かないのは、
background-attachment: fixed;とbackground-size: cover;を同時に指定しているからです。

これらの同時指定は、iOSで問題が起きてしまうようです。
iOSで問題が起きるということは、iPhoneやiPadでは指定が無効になってしまうということですね。

この例を見ていただけると分かります。
background-attachment: fixed;とbackground-size: cover;を同時使用した事例です。
パソコンでは問題なく背景固定されていますが、スマートフォンで見てみると背景固定されていないことが確認できると思います。

スマートフォンでも背景固定をしたいときは、こうします。

スマートフォンでも背景固定をしたい場合、背景を固定するのではなく、ベースとなる親要素へ疑似要素と指定し、その疑似要素を固定表示させることで実現できます。

backgroundを使用するのではなく、positionを使用する方法です。

この方法でのポイントは、
・固定表示する疑似要素の重なり順を『z-index:-1;』にすること
・固定表示する疑似要素の高さを『height:100vh;』にすること

これらの指定を忘れないようにしましょう。

まとめ

最近は、背景固定の仕様が増えています。
パソコンで出来ている動きや表示をスマートフォンでも同じように再現することも必要となっています。

お困りの際は、この記事を作業時間の短縮に役立てください。

ご相談・カスタマイズご依頼

弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア

無料相談窓口