【CSS】background-imageが表示されない原因と直し方

background-imageで背景画像が表示されない8つの原因

background-imageを使用しているのに背景画像が表示されない原因は、いくつか考えられます。多くの場合は、設定ミスや単純なエラーが原因です。

背景画像が表示されない問題に直面したときは、ここから紹介する8つの原因を、上から順にチェックしていきましょう。

1. 画像の指定場所が間違っている
2. CSSの記述ミスをしている
3. 要素が空かつ高さや幅が指定されていない
4. 画像ファイルの記述などに問題がある
5. background-imageをインライン要素に設定している
6. 他の画像に重なっている
7. 閉じタグ</div>などを書いていない
8. 別のCSSで上書きされている（一時的に!importantで切り分け）

1. 画像の指定場所が間違っている

画像を読み込むときには、画像の場所（パス）を指定することが必要です。パスを指定することで、任意の場所にある画像を使用できるようになります。

パスには「絶対パス」と「相対パス」があります。絶対パスとは、「https://」から画像の場所までをすべて書く指定のことです。それに対して相対パスとは、基準になるファイルが置かれているフォルダから画像までの道のりのことです。

基準になるのは、CSSファイルに書いた場合はCSSファイル、HTMLの<style>タグやstyle属性に書いた場合はHTMLファイルです。

背景画像が表示されない原因としてよくあるのが、相対パスの指定の間違いです。例えば、以下のようなフォルダ構成の場合の相対パスの指定方法は次のようになります。

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

「../」は一つ上の階層を意味しています。必ず自分のフォルダ構成に合わせて、正しいパスを指定しましょう。

2. CSSの記述ミスをしている

単純な記述ミスでも、背景画像が表示されない原因になります。

• セミコロンの抜け

CSSでは、各プロパティの値の末尾にセミコロン（;）を付けます。セミコロンを忘れると、その行と次の行がつながって一つの指定として読まれ、どちらも正しく認識されません。いちばん最後の行だけはセミコロンが無くても動きますが、あとで行を書き足したときに同じ間違いが起きるので、付けておきましょう。

/* 間違い */
.background{
    background-image: url('../image.jpg') /* 最後に ; がない */
    background-repeat: no-repeat /* 最後に ; がない */
}

/* 正しい */
.background{
    background-image: url('../image.jpg');
    background-repeat: no-repeat;
}

• 全角入力、全角スペースがある

プロパティ名や「:」「;」などの記号を全角で入力したり、値の前後に全角スペースが入ったりすると、その指定は正しく認識されません。CSSは、日本語のフォント名やコメントなどを除き、半角文字、半角スペースで入力しましょう。

/* 間違い */
.background{
    background-image:  url('../image.jpg'); /* : と url の間に全角スペースがある */
}

/* 正しい */
.background{
    background-image: url('../image.jpg');
}

• url()の記述ミス

background-imageで画像を指定する際、url()の記述に誤りがあると画像が表示されません。

/* 間違い */
.background{
    background-image: url ('../image.jpg'); /* url と () の間にスペースがある */
}

/* 正しい */
.background{
    background-image: url('../image.jpg');
}

• スペルミス

値やプロパティのスペルミスは、よくある原因です。background-imageでいうと、「background-images」と語尾に「s」をつけてしまったり、「backgroundimage」と間に「-」が抜けてしまったりしてしまうこともあります。

背景の画像が表示されなかったら、真っ先にスペルをチェックしてみてください。

3. 要素が空かつ高さや幅が指定されていない

要素とは、<div>や<p>など、HTMLの開始タグと終了タグで囲まれた部分を指します。

background-imageは、要素の領域に背景として画像を表示させるCSSのプロパティです。そのため、要素の中身が空で高さも指定していないと、表示する領域が無く、背景画像も見えません。

以下のように記述したと仮定します。

<div class="background"></div>

.background{
    background-image: url('../image.jpg');
}

このとき、要素の中身は空で、CSSで高さも指定していないため、要素の高さは「0」になり、背景画像は見えません。divのような通常のブロック要素は、幅は親要素いっぱいに広がりますが、高さは中身の分しかありません。flexの子要素や、position: absolute; やfloatを指定した要素では、幅も「0」になります。

正しく背景画像を表示したいときには、要素に高さ・幅を指定するか、子要素やテキストなどで要素の高さが確保される状態にしましょう。

<div class="background">テキスト</div>

.background{
    background-image: url('../image.jpg');
    height: 400px;
    width: 600px;
}

4. 画像ファイルの記述などに問題がある

画像ファイルには「jpg」や「png」、「gif」などさまざまな拡張子があります。url()に書いた拡張子が、実際のファイルの拡張子と違うだけでも表示されません（例：ファイルは「background.png」なのに「background.jpg」と書いている）。そして、ファイル名のスペルミスは、頻繁に発生する問題の一つです。

画像ファイル自体に問題がある可能性もあります。画像ファイルが壊れていると表示されません。画像ファイルを開いて確認し、必要があれば別の画像に置き換えましょう。

5. background-imageをインライン要素に設定している

インライン要素とは、行の中の一部のまとまりで、<a>や<span>などの要素のことです。他の要素と同じ行に配置され、widthやheightを指定しても、幅や高さは変わりません。

インライン要素にもbackground-imageは表示されますが、表示されるのは中の文字がある範囲だけです。中身が空なら幅が0になり、背景画像は見えません。決めた大きさで背景画像を見せたいときは、幅や高さを指定できるブロック要素を使いましょう。

例えば、span などに指定している場合は、display: inline-block;（または display: block;）に変更し、必要に応じて width / height を指定すると表示されることがあります。

6. 他の画像に重なっている

z-indexを使用すると画像の重なる順番を変えられます。数値が大きいと上に、小さいと下に表示されます。

そのため、z-indexの数値が大きい画像があると重なってしまい、画像は表示されているはずなのに見えないということが起こります。

以下のように指定して、重なる順番を調整しましょう。なおz-index を効かせるには、対象要素にposition: relative; などの指定が必要な場合があります。

.background{
    position: relative;
    z-index: 1;
    background-image: url('../image.jpg');
}

7. 閉じタグ</div>などを書いていない

閉じ忘れのなかには、背景画像が表示されなくなるものがあります。例えば、class属性の値を囲む引用符を閉じ忘れると、後ろのタグまで属性の値に取り込まれてクラスが当たらず、背景画像も中のテキストも表示されません。HTMLのコメントを閉じ忘れたときも、そこから後ろが表示されなくなります。

一方、</div>の閉じ忘れでは、背景画像は消えません。ただし、後ろの要素までその中に入り込み、背景がかかる範囲や配置が意図とずれます。コードが長くなると、閉じタグを間違って削除していることにも気がつきにくくなります。

開始タグと閉じタグがペアになっているか、必ず確認しましょう。

<!-- 間違い -->
<div class="background">
  <p>テキスト</p>
<!-- 閉じタグがない -->

<!-- 正しい -->
<div class="background">
  <p>テキスト</p>
</div>

8. 別のCSSで上書きされている（一時的に!importantで切り分け）

上記の方法を試しても解決しない場合、「!important」を使用して表示できるか確認してみましょう。ただし表示の優先順位を上書きしてしまうため、試しに使用してみる程度にとどめておきましょう。

まずは原因の切り分けとして一時的に使い、表示できた場合は、どこかで別の指定が優先されている可能性が高いです。記述の重複や指定箇所を見直してください。

.background{
    background-image: url('../image.jpg') !important;
}

background-imageが表示されないことに関するよくある質問

background-imageで背景画像が表示されない原因と解決法に関する、よくある質問をまとめます。

Q：相対パスはどこ基準ですか？

CSSファイルに書いた場合は、CSSファイルが置かれているフォルダが基準です。HTMLの<style>タグやstyle属性に書いた場合は、HTMLファイルが置かれているフォルダが基準になります。フォルダ構成に合わせて ../ を調整してください。

Q：要素に高さや幅がないと表示されませんか？

背景画像は要素の領域に表示されるため、要素が空で高さが0だと見えません（flexの子要素などでは幅も0になります）。height / width を指定するか、要素内に内容が入る構造にしてください。

Q：パスも記述も合っているのに表示されないのはなぜ？

中身が空のインライン要素（span など）に指定している、他の要素に重なっている（z-index など）、属性の引用符やコメントを閉じ忘れているなどが原因のことがあります。本文の5〜7を順に確認してください。

まとめ

background-imageで背景画像が表示されない原因はさまざまです。ファイルパスの確認、CSSの記述ミスのチェック、要素サイズの指定など、基本的なところから順番に確認していきましょう。

この記事を参考に、ぜひ背景画像の表示問題を解決してください。