全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
スマホで『background-attachment: fixed』が効かないときの解決法
2020.05.06
※この記事は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;』にすること
これらの指定を忘れないようにしましょう。
まとめ
最近は、背景固定の仕様が増えています。
パソコンで出来ている動きや表示をスマートフォンでも同じように再現することも必要となっています。
お困りの際は、この記事を作業時間の短縮に役立てください。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
この記事を読んだ方はこんな記事も読んでいます
こんにちは。コーダーの兼山です。 Retinaディスプレイやスマートフォンなどの高解像度ディスプレイへの対策として、2倍…
こんにちは。コーダーの兼山です。 コーディング時にtableで表を組み込む際、レスポンシブコーディングなどでのスマートフ…
