cssで背景画像が表示されない時に試して欲しいポイント7つ

0.はじめに

模写をしている際に、一番苦労したことが「背景画像が出てこない・・・」でした。
大量の時間を私のように溶かさないためにも試して欲しいポイント7つを紹介します。

1.読んで欲しい人

・背景画像が表示されず苦しんでいる方
・プログラミング初心者の方

2.使用環境

• HTML5
• CSS3
• GoogleChrome
• mac.os バージョン10.15.6

参考リンク：CSSのバージョンについて

3.ポイント7つ

3.1 画像の指定場所を間違えていないか(絶対パス/相対パス)
3.2 画像名のスペルミス
3.3 後ろに回り込みをしていないか（z-index）
3.4 他の画像で適用できるか
3.5 widthとheightの指定し忘れがないか
3.6 など閉じタグ忘れがないか
3.7 !importantを使用してみる

以上です。検証していけば、どれかが当てはまると思います。

catというクラス名を指定して、猫の背景画像を適用させたいとします。

index.html

<div class="cat">
 <p>背景画像は猫</p>
</div>

style.css

.cat {
  background-image: url(../img/cat1.jpg); /* 背景の場所を指定する */
  background-size: cover;                 /* 繰り返し表示を防ぐ */
  width: 300px;
  height: 500px;                         /* 幅と高さを指定する */
}

3.1 画像の指定場所を間違えていないか(絶対パス/相対パス)

ファイルや画像を読み込む際、パスの指定が必要になります。
パスを指定することで、特定の場所にあるデータを使用することができます。
パスには絶対パス（URLを入力する）と相対パス（フォルダやデータの場所を指定する）の2種類があります。
今回は相対パスを使用しました。

参考リンク：【初心者向け】絶対パスと相対パスの違いをイラストを使って解説！

style.css

.cat {
  background-image: url(../img/cat1.jpg); /* 背景の場所を指定する */
}

例の階層場所のイメージ
　新規フォルダをデスクトップに作成し、
　HTMLとimgフォルダは同じ階層、cssはcssフォルダ内のファイルのため1つ下の階層です。
　imgフォルダ内にcat1.jpgを保存しています。

そのため、上の記述になります。指定先を間違えると画像が表示されません。

3.2 画像名のスペルミス

例の場合、cat1.jpgをcat.jpgなどと表記すると表示されません。特に名前が長い場合は誤りがないか確認しましょう。

3.3 後ろに回り込みをしていないか(z-index)

z-indexを使用すると重なり順を変更することができます。（数字が大きいほど上に表示されます。）
なので、画像そのものは表示されているけれど、数字が大きい画像の下に回り込みをしている可能性があります。

冒頭の猫の画像に田舎の画像を重ねて表示したいとします。

冒頭のHTML

index.html

<div class="cat">
 <p>背景画像は猫</p>
</div>

田舎の画像を重ねたい

index.html

<div class="container">
   <div class="cat">
     <p>背景画像は猫</p>
   </div>
   <div class="inaka">
     <p>田舎もいいね</p>
   </div>
 </div>

style.css

.container {
  background-color: pink;
  width: 600px;
  height: 400px;
  position:relative;
}
.cat {
  background-image:url(../img/cat1.jpg);
  background-size: cover;
  width: 300px;
  height: 200px;
  position: absolute; 
  top: 10px;  /* 親要素containerからの位置を指定する */
  left: 10px;
}
.inaka {
  background-image:url(../img/inaka.jpg);
  background-size: cover;
  width: 300px;
  height: 200px;
  position: absolute;
  top: 50px;
  left: 60px;
}

通常の場合、後に記述した田舎の画像が上に配置されます。
次に、各要素にz-indexを指定してみます。

style.css

/* 親要素containerのコードは省略 */

.cat {
  background-image:url(../img/cat1.jpg);
  background-size: cover;
  width: 300px;
  height: 200px;
  position: absolute; 
  top: 10px;  /* 親要素containerからの位置を指定する */
  left: 10px;
  z-index: 20; /* 猫の画像を上にする */
}

.inaka {
  background-image:url(../img/inaka.jpg);
  background-size: cover;
  width: 300px;
  height: 200px;
  position: absolute;
  top: 50px;
  left: 60px;
  z-index: 10; /* 田舎の画像が下に来る */
}

このようになります。

あまりないパターンかもしれませんが、私はヘッダー箇所にposition:fixed;とz-indexを使用していたため、もしかしたら？と思い確認しました。

参考リンク：z-indexの使い方

3.4 他の画像で適用できるか

画像そのものに問題があるかもしれないので、他の画像もしくはbackground-colorで適用可能か確認しましょう。

3.5 widthとheightの指定し忘れがないか

表題の通りです。

3.6 </div>などの閉じタグ忘れがないか

今回私の背景画像が出ない理由はこれでした。
コードが長くなり、閉じタグを誤って消していることに気づかず、表示がされていませんでした。
VSCodeの拡張機能であるAuto Rename Tagを入れていましたが、
①</div>を消す
②開きタグが< class="">になる
③開きタグのみ修正する
と自分がしていたために閉じタグを忘れていました・・。
（この流れで修正を行うと、再度閉じタグは入りません）

参考リンク：VSCode に必ず入れておきたい拡張機能

3.7 !importantを使用してみる

「プロパティ:値」の後ろに半角スペースを入れ、!importantを記述します。
猫の背景画像を優先させたい場合は以下のようになります。

style.css

.cat {
  background-image:url(../img/cat1.jpg) !important;

/* 以下省略 */
}

最終奥義のようなものであり（乱発するとコードが読みにくくなる）、優先順位を変更させたい時のものなので、先述の6つを試してみて、それでも表示されない時に一度試してみる程度の方が良いのかもしれません。

参考リンク：CSSで!importantを使った優先順位の変更

4.最後に

まさかの閉じタグ忘れでした。自分でも驚きましたが、まさかというところにヒントがあると思います。（と自分に言い聞かせています）
同じように悩まれている方の参考になればと思います。
記事の感想や意見、ご指摘等あれば伝えていただけるとありがたいです。
読んでいただき、ありがとうございました。