background-image と imgタグ どっち使おうかな～って思うときってありますよね。
そういう場合は
・この画像はコンテンツのひとつか？
として考えると良いですね。で、コンテンツじゃない場合は背景画像として処理をします。
・・・
背景画像が表示されない！！！！！
これはそんな時に見る記事です。
1.パスは適切か？
imgタグにしようか背景画像にしようか～ってところで悩む皆さん、パスの理解は正しくできていますか？
画像ファイル・cssファイルの格納場所によっては、img タグで書くときと背景画像で書くときとでパスが違っていることも多いです。
imgタグは、htmlファイルから見た画像の位置です。
背景画像はcssファイルで指定するので、cssファイルから見た画像の位置を指定しましょう。
2.ファイル名は適切か？
パスが合ってるのに表示されない、、と思うあなた、よく見るとファイル名が違っていたりはしませんか。
今一度確認してみましょう。
3.高さはあるか？
その背景画像を指定している要素およびその子要素に、なにかしら html 上での文字があったり画像があったりするのであればここでは引っかからないんですが、
要素の中に背景画像しかない場合は陥りやすい部分。
背景画像はその名の通り「背景」なので、背景画像以外に表示するコンテンツが無い場合は背景画像も表示されません。
試しにheightなどで高さを指定してみて、表示できるか確認してみましょう。
まとめ
なんとなく背景画像って難しそうだし、さらにうまく表示できない！ってなると敬遠してしまいがちですが、
なんだかんだで使用頻度の高いプロパティです。
怖がらず覚えていきましょう！★
