更新日: 2022 / 08 / 09

CSSで背景画像が表示されない場合の原因と修正方法

カテゴリー: coding

CSSのbackground-imageで背景に画像を表示させたいときに何も表示されない場合の対策をまとめてみました。

原因がわかると大したことないんですが、色々いじってみてもうまく動かなくて小一時間詰まってしまうってこともあります。

ここでは背景が表示されないときによくある原因と修正方法をまとめてみたので参考にしてみてください。

  1. CSSで画像が表示されない原因

  2. 画像が表示されない場合の具体的な修正方法

    1. URLの入力ミスを確認する
    2. WidthとHeightの指定ミス
    3. Contentの指定忘れ
    4. Z-indexで順序の指定
  3. まとめ

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のwidthheightの指定を忘れている場合も画像が正しく表示されないことがあります。

.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つのどちらかが原因の場合がほとんどなので、ある程度的を絞って原因を探すことができます。