PCでの背景固定はできたが、スマホでの背景固定はうまく反映されなかったときの対処法。
スマホでは固定できても画像がでかくなっただけで、スクロールしても一緒についてスクロールされていた。
理屈がよくわからなくてもとりあえずこのCSSで解決。
画像が背景に固定され、文字やコンテンツのみスクロールされるようになったので、もし同じような症状でわけわからないっていう方は参考にしてみてください。
もちろんバックアップ等はしっかりお願いします。
責任は負えません！
スマホスクロールでも背景画像固定する方法
CSS記述
子テーマに下の文字列をまるまる入れます。
メモ
/*固定背景の編集
--------------------------------*/
body::before {
content: "";
background: url() no-repeat center center;
background-size: cover;
display: block;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
}
/*ここまで
--------------------------------*/
「background: url」の横の（）内には画像のURLをいれる。
width: 100vw;
height: 100vh;
この辺は高さや幅なので何となく分かるかと。
PCとスマホで固定させるさせないを変えたい場合は記載する領域を変えて調整。
一応自分はこの編集で背景画像を固定することができ、スクロールしても問題ない状態になりました。
このブログのTOPページ背景が見本ですね。
CSSに記述する内容は、上のメモからそのまま子テーマに入れても文字の関係でうまく反映されない場合がありますのでご注意を！