【クリティカルなバグ】スマホ表示で背景画像が固定できないときの対処法【プログラミング】

最近スマホのレスポンシブ対応をしている時に、実機で確認していたら「背景画像が動かない!」と戸惑いあせりました。

皆さんにはそんなってほしくないので、今回は原因と対処法を解説していきます。

スポンサーリンク

スマホ表示で背景画像が固定できない原因

そもそもスマホ表示で背景画像が固定できないのは、クリティカルなバグが原因なんです。

検証のためにCan I use…で見てみると、

赤線で囲ったところに英語で、「background-attachment:fixedとbackground-size:cover;を同時にiOSでは使うな」的なのが書いてあるんですよ。

なので、スマホ(ios)ではこうしたバグが起きるんですね。

Can I use…とは
HTML/CSSのタグが使用できるか確認するためのサービスです。
例えば、Google Chromeでは使用できるけど、Firefoxでは使用できないというタグを予め確認するのに使います。

スポンサーリンク

対処法

対処法は、画像にはbackground-size:cover;を指定して、背景画像を入れたい範囲に:beforeを指定して、background-attachment:fixed;をするのではなく、position:fixed;を変わりに使用します。

要は別の指定をしろということですね。

コードを書くと、こうなります。

CSSコード

body::before {
background-image:url(./images/image.png)
background-image:no-repeat;
background-image:center;

background-size: cover;
content: "";

position:fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100vh;
}

イメージは、bodyそのものにfixedをする感じです。
こうすれば直ります!

困っている方がいたら試してください!

それでは、以上です!