【CSS】background-imageが表示されないときの原因と直し方｜パス→記述→高さ0の順で確認

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

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

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

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

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

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

パスには「絶対パス」と「相対パス」があります。絶対パスとは階層の一番上から画像の場所までの道のりのことで、相対パスとはCSSファイルが置かれているフォルダから画像までの道のりのことです。

実は背景画像が表示されない原因として一番多いのは、相対パスが正しく指定されていないことです。

例えば、以下のようなフォルダ構成の場合の相対パスの指定方法は次のようになります。

.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 class="background">テキスト</div>

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

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

画像ファイルには「jpg」や「png」、「gif」などさまざまな拡張子があります。画像ファイルの拡張子が間違っているだけでも表示されません。そして、ファイル名のスペルミスは頻繁に発生する問題の一つです。

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

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

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

そのため、background-imageをインライン要素に使用しても、背景の画像が表示できない場合があります。background-imageでは幅や高さが変更できるブロック要素を使用するようにしましょう。

例えば、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>などを書いていない

</div>などの閉じタグを忘れるだけでも、背景画像は表示されません。コードが長くなると、</div>などの閉じタグを間違って削除していることにも気がつきにくくなります。

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

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

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

8. ここまでのものを確認してもダメなら、最終手段として!importantを使う

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

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

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

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

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

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

相対パスは、基本的にCSSファイルが置かれているフォルダを基準に指定します。フォルダ構成に合わせて ../ を調整してください。

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

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

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

インライン要素（span など）に指定している、他の要素に重なっている（z-index など）、閉じタグ漏れなどが原因のことがあります。本文の5〜7を順に確認してください。

まとめ

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

この記事を参考に、ぜひ背景画像の表示問題を解決してください。CSSの理解が深まり、より魅力的なWebデザインができるようになるはずです。