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

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

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

# 2.使用環境
- HTML5
- CSS3
- GoogleChrome
- mac.os バージョン10.15.6

 参考リンク：[CSSのバージョンについて](https://ferret-plus.com/2502)

# 3.ポイント7つ
3.1 画像の指定場所を間違えていないか(絶対パス/相対パス)
3.2 画像名のスペルミス
3.3 後ろに回り込みをしていないか（z-index）
3.4 他の画像で適用できるか
3.5 widthとheightの指定し忘れがないか
3.6 </div>など閉じタグ忘れがないか
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;                         /* 幅と高さを指定する */
}
```
<img width="400" alt="Q_sample1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689555/711619b8-7d55-c29b-de62-9afb07a5e91d.png">

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

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

参考リンク：[【初心者向け】絶対パスと相対パスの違いをイラストを使って解説！](https://webliker.info/78726/)

```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;
}
```
<img width="400" alt="Q_sample2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689555/d8cdb2bd-1047-b14b-b603-cc1f815d0ceb.png">

通常の場合、後に記述した田舎の画像が上に配置されます。
次に、各要素に`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; /* 田舎の画像が下に来る */
}
```
このようになります。
<img width="400" alt="Q_sample3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689555/4ebb1e3c-f12a-96f6-4361-f8ec81b6ace3.png">

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

参考リンク：[z-indexの使い方](https://saruwakakun.com/html-css/basic/z-index)

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

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

### 3.5 widthとheightの指定し忘れがないか
表題の通りです。

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

参考リンク：[VSCode に必ず入れておきたい拡張機能]("https://qiita.com/ucan-lab/items/e85931bf8276da43cc97")

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

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

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

参考リンク：[CSSで!importantを使った優先順位の変更](https://techacademy.jp/magazine/9424)

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