[勝手に回答]「background-imageをfixedさせたい」

初心者エンジニアが困っているのを見過ごせない、ユゲタです。 cssのことで質問をしているケースを見ると、大体が簡単なミスや、スタイルシートの特性を理解しきれていない質問が多いため、その点だけを教えるのではなく、何故そうなるのかという仕組みを理解してもらうように説明するんですが、そもそも、ネットで調べるとすぐに回答が得られるのに、何故彼らはそうしないのか、その点はかなり謎でもありますね。

今回の質問

https://teratail.com/questions/285787 「background-imageをfixedさせたい」

background-imageをある一つのsectionに固定したいのですが下記の記述だとiOSで効いてくれないので代わりの方法を教えてください。 background-size: cover ; background-attachment: fixed; →iOSは一緒に使えない。 ・androidでは問題なく固定されます。 ・キャッシュの削除は試しています。 ・・・ソースコード・・・

質問には、HTMLとcssのソースコードが書かれていましたが、これは再現性も確認できないコードだったので割愛。

質問を読み解く

この質問には、２つの大きな問題点があり、それを理解して解決する必要があります。

問題点1. backgroundのsize:coverとattachment:fixedがスマホでは同時に使えない

この質問は、検索すればすぐに回答が得られます。 https://web.runland.co.jp/blog_cate2/post-3558 「スマホで『background-attachment: fixed』が効かないときの解決法」 このサイトにズバリ解決方法が書かれています。 確かにスマホにおける、backgroundのcoverとfixedの相性はよろしくないようで、ググっている時にも、色々と困っていると思わしき質問を見かけました。 上記解説サイトによると、疑似要素を利用することで、問題解決していました。

See the Pen Question #3 fix by YugetaKoji (@geta1972) on CodePen.

疑似要素にするポイントはいくつかありますが、before疑似要素を画像パス以外をコピーしてどこでも使えるように書いてみました。 ただ、スマートフォンで表示してみると、スクロールすると、ブラウザのメニューバーが見え隠れして、background-size:coverを実行しているために、背景画像がガクガクとしてしまう事も同時に確認できました。 おそらく、こうした挙動が不具合っぽく見えるので、機能的に排除しているんだと思われますね。

問題点2. 任意タグの内部におけるbabkground-fixed画像の挙動

今回試してみて気がついたんですが、background-attachment:fixedは、適用すると、画面の背景に対しての挙動になってしまうため、スクロールが実行される要素に対してのbackground摘要になってしまうようです。 そのため、background-size:coverが、だいたいがbodyタグのサイズに対して摘要されてしまうため、 bodyタグ背景以外で使用すると、背景サイズがおかしくなってしまうようです。 これは、pcブラウザでも、再現確認できるので、やってみて初めて気がついたという状態です。

まとめ

背景のfixedは、トリッキーな見た目を作ることができますが、簡易に背景操作をするだけではなく、今回の解決法のように擬似要素を使うか、実際に背景としての要素をタグで作っておいて、relativeで固定させたほうが、確実にコントロールしやすいように思えました。 こだわったら奥が深い内容でしたが、単なる背景として設置するだけでもいいようなシンプルなページ作りを心得たいですね。