CSS background-imageが表示されない9つの原因と修正方法

こんにちは。テイクです。ホームページを作り続けて9年になります。

なぜかbackground-image（背景画像）が表示されない！

そんなときのbackground-image（背景画像）が表示されない原因と修正方法を9つ説明します。

下記のようにCSSを記載しているとします。

.example{
    background-image: url(../images/1.jpg);
}

これで画像が表示されないとき以下を確認してみてください

結論

background-image（背景画像）が表示されないときは以下の原因が考えられます

以下で原因・確認方法など詳しく説明します。

原因の絞り込みのために背景色を指定してみる

.example{
    background: #999 url(../images/1.jpg);
}

色はなんでもいいですが一緒に色を指定してみます。
これにより原因の絞り込みができます。

※background-imageだと色は指定できないのでいったんbackgroundにしましょう。

色は表示されたとき

色が表示された場合は画像そのものに問題がある可能性が高いです。

1.画像のパスを間違えている

「../」の数を間違えていたり、ファイル・フォルダの名前が間違っている可能性があります。

また、CSSファイルに記述した場合CSSファイルから画像までのパスを指定する必要があります。

CSSファイルを移動させた後に画像が表示されなくなったら間違いなくこれでしょう。

ただし、htmlに直書きしている場合はhtmlファイルから画像までのパスです。

DevToolsを使うとbackgorund-imageの指定先を確認できます。

画像のパスを絶対パスにしてみるのも手です。

絶対パスで表示されないときはSSLに注意です。

サイトが「https://~」とSSL対応しているのに、画像を「http://~」のように指定すると画像が表示されない場合があります。

このときは画像も「https://~」にしましょう。

2.画像が対象のフォルダに入っていない・アップロードされていない

指定のフォルダ内に画像が入っているか・アップロードされているか確認しましょう。

3.画像の名前・拡張子を間違えている

ありがちなのはjpg・pngの違いやjpg・jpegの違いです。
ブラウザによってはjpg・JPGと大文字小文字の違いでも表示されません。

拡張子「jpg」と「png」が違うと別のファイルとなりますので注意です。

4.「url」と「(」の間にスペースがある

以下のように「url」と「(」の間にスペースがあるとNGです。
スペースを削除しましょう。

.example{
    background-image:url (../images/1.jpg);
}

5.style直書きにて””をつけている

CSSファイルにて下記のように相対パス部分を""（ダブルクォーテーション）で囲うことができます。

.example{
    background-image:url("../images/1.jpg");
}

しかし、htmlタグにstyle直書きしたときに相対パス部分を""（ダブルクォーテーション）で囲うと効かなくなります。

NG例

<div style="background-image:url("../images/1.jpg");"></div>

htmlタグにstyle直書きするときの相対パス部分は””（ダブルクォーテーション）なしで記述しましょう。

OK例

<div style="background-image:url(../images/1.jpg);"></div>

色も表示されないとき

色も表示されないときは背景画像を表示するスペースがないか、CSSがおかしい可能性があります。

6.widthかheightが0

imgと違いwidthやheightは自動計算されません。
とくにテキストなど内容がない要素に背景画像を指定している場合は要注意です。
テキストがない場合heightが0になっている場合があります。
widthとheightに数値を指定しましょう。

7.インライン要素に指定している

aタグやspanタグはインライン要素です。

厳密に言うとインライン要素でもbackground-imageは設定できますが、インライン要素は高さを指定できないため、設定した背景画像によっては画像が表示されないように見えます。

ちなみにhtml5で追加されたmainタグはIE11でインライン要素として扱われます。

このときは「display:block」を指定してブロック要素にしましょう。

8.CSS優先度で負けている

記述は間違えていなくても他のセレクタに優先度で負けている可能性があります。CSS優先度については下記の記事を参考にしてみてください。

例えば「background」で一通り指定し「background-image」で追加の指定をしたいとします。

下記NG例のように「background-image」のあとに「background」を指定すると「background-image」が上書きされ、効かなくなってしまいます。

NG例

.example{    
    background-image:url(../images/1.jpg);
    background: #000 no-repeat center center / cover;
}

下記OK例のように「background」を指定してから「background-image」を指定しましょう。

OK例

.example{
    background: #000 no-repeat center center / cover;
    background-image:url(../images/1.jpg);   
}

9.記述ミス

記述ミスなどないか下記を参考に探してみてください。

まとめ

background-imageが表示されないときは背景色を指定してみる

色は表示されたとき

1. 画像のパスを間違えている
2. 画像が対象のフォルダに入っていない・アップロードされていない
3. 画像の名前・拡張子が間違えている
4. 「url」と「(」の間にスペースがある
5. style直書きにて””をつけている

色も表示されないとき

1. widthかheightが0
2. インライン要素に指定している
3. CSS優先度で負けている
4. 記述ミス

以上、background-imageが表示されない原因と修正方法でした。