CSSのbackground-imageで背景に画像を表示させたいときに何も表示されない場合の対策をまとめてみました。
原因がわかると大したことないんですが、色々いじってみてもうまく動かなくて小一時間詰まってしまうってこともあります。
ここでは背景が表示されないときによくある原因と修正方法をまとめてみたので参考にしてみてください。
CSSで画像が表示されない原因
CSSで画像が表示されない場合によくある原因としては以下のようなものがあります。
- URLの入力ミス
- WidthとHeightの指定ミス
- Contentの指定忘れ
- Z-indexで順序の指定
URLの入力はbackground-imageのプロパティで入力するところでここが間違っているとうまく表示されません。
WidthとHeightはHTMLのimgタグだととくに指定しなくてもうまく表示されるのですが、背景の場合指定しないと正しく表示されないことがあります。
Contentは:beforeや:afterのような疑似要素に対して背景を当てる場合によく忘れるやつですね。
z-indexプロパティもよくある原因で、背景画像の上に別の要素が被ってる場合は表示されなくなります。
画像が表示されない場合の具体的な修正方法
ここからは上記の原因を修正する方法を解説します。どれもそれほど難しくないので簡単に解決すると思います。
URLの入力ミスを確認する
background-imageプロパティのurl()で入力する値を間違えると正しく画像が表示されないので、まずはここにミスがないか確認します。
URLの入力方法は相対パスと絶対パスがあり、とくに相対パスの場合は階層を正しく指定できていないことが多いので注意してください。
/* 相対パスでURLを入力 */
.bg {
background-image: url(../images/background.png);
}
/* 絶対パスでURLを入力 */
.bg {
background-image: url(https://example.com/assets/images/background.png);
}URLが正しいのに画像が表示されない場合はサーバー上に画像があるかどうかをチェックしてみてください。
WidthとHeightの指定ミス
CSSのwidthとheightの指定を忘れている場合も画像が正しく表示されないことがあります。
.bg {
width: 500px;
height: 300px;
background-image: url(../images/background.png);
}Contentの指定忘れ
CSSの疑似要素を使っている場合はcontentを忘れていることもあります。背景画像を表示させるときに疑似要素はかなり便利でよく使うので忘れず入力しておきましょう。
.bg:after {
content: "";
width: 500px;
height: 300px;
background-image: url(../images/background.png);
}Z-indexで順序の指定
CSSやHTMLは順序によって階層構造になっているので、本来上に表示して欲しいものが下に回り込んでしまうことがあります。
そういうときはz-indexプロパティで順序を変えてみてうまく表示できないか試してみます。
.bg:after {
z-index: 999;
background-image: url(../images/background.png);
}まとめ
CSSで背景画像が表示されない場合の原因と修正方法について解説しましたが、問題を大きく分けると次の2つに絞れます。
- コードの入力ミス
- コードの優先順位の問題
HTMLコードもCSSコードも何か問題があったらこの2つのどちらかが原因の場合がほとんどなので、ある程度的を絞って原因を探すことができます。