【CSS】background-imageで背景画像が表示されない！原因と解決策を解説

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

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

背景画像が表示されない問題に直面したときは、以下の点を順番にチェックしていきましょう。

1. 画像の指定場所が間違っている
2. CSSの記載ミスをしている
3. 要素が空かつ高さや幅が指定されていない
4. 画像ファイルの記述などに問題がある
5. background-imageをインライン要素に設定している
6. 他の画像に重なっている
7. 閉じタグ</div>などを書いていない
8. ここまでのものを確認してもダメなら、最終手段として!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では幅や高さが変更できるブロック要素を使用するようにしましょう。

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

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

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

以下のように指定して、重なる順番を調整しましょう。

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

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

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