【CSS】背景画像が表示されない・・・初心者あるあるの原因5選

「背景画像を設定したのに映らない・・・」

という疑問にお答えします。

初学者の方にとってはよくあるエラーです。

特にメインヴィジュアルでこのエラーが発生すると、いきなりつまづいた感が出てしまって出鼻をくじかれることに・・・。

原因はいくつかありますが、一つ一つチェックしていけばすぐ解決します。
とっとと解決して次に進みましょう。

それではさっそくレッツコード！

チェックポイント

CSSでbackground-imageを設定しても背景画像が反映されないとき、チェックすべきポイントはいくつかあります。

それでは一つずつチェックしていきましょう。

１　相対パスの表示

相対パスが間違っていると映りません。

しっかり画像までの階層をチェックしてパスの確認をしましょう。

そもそも階層について自信がない人はこちらから復習してくださいね。

VSCodeの落とし穴

VSCodeには画像を右クリックすると「相対パスをコピー」できる項目があり、階層をチェックしなくても相対パスを取得できるおりこうさん機能があります。

しかしこの便利な機能にも落とし穴があります。

一つ目は、WindowsでVSCodeを使用する場合です。
相対パスを貼り付けると、階層の「/」（スラッシュ）が「\」（バックスラッシュ）で表示されるケースがあります。

便利な機能ですがしっかり確認しましょう。

それともう一つあります。
「相対パスをコピー」で取得したパスは、HTMLファイルを基準にしたパスです。

background-imageの記述はcssファイルですね。
cssファイルを基準にしたパスになっているかしっかり確認しましょう。

２〜４　誤字脱字

２　画像のファイル名

３　HTMLとcssの記述ミス

４　全角スペースの混入

画像のファイル名を変更することはけっこうありますし、背景画像のエラーに限らず、エラーの多くは記述ミスです。
しっかり確認しましょう。

５　要素の高さは足りているか

テキストを何も入力していない状態、いわゆる白紙の状態で背景画像を設定しても反映されません。

背景画像が反映させるには高さが必要だからです。
要素が何もないと、高さはゼロの状態です。

とりあえず適当に高さ（height）を500pxとかで設定して映るか確認しましょう。

もしそれでも映らない場合は、背景色（background-color）を適当に設定しましょう。
もし色が反映されたら、背景画像を設定するにあたりhtmlやcssに記述ミスがあることになります。

まとめ

トップのメインビジュアルで画像を使うことが多いと思いますが、ここでつまづくとしょっぱなから「うわー」ってなります。
でももう大丈夫ですね。

エラーは自分の知識を広げるチャンスです。
ひるまずググりましょう。

画像関連の記事も紹介しておきます↓