背景画像が表示されないときの原因と対処

まず疑うのはパスの間違い

背景画像が出ない原因で最も多いのがパスの誤りです。url() に書いたパスは、HTML ファイルではなく CSS ファイルの位置を基準とした相対パスとして解釈されます。HTML 基準で考えていると、CSS が別フォルダにあるときにずれます。

ファイル名の大文字小文字の違いや、拡張子の取り違え（.jpg と .jpeg、.png の混同）も、環境によっては表示されない原因になります。まずは指定したパスに本当にファイルが存在し、正しく届いているかを確認するのが先決です。

要素の高さがゼロだと背景は見えない

パスが正しくても、背景を指定した要素自体の高さがゼロだと、背景画像は表示されません。中に文字などのコンテンツがない空の div は、高さを明示しない限り潰れてしまいます。

画像は読み込めているのに見えない、というときはこのパターンを疑ってください。要素に height や min-height、aspect-ratio、あるいは padding を与えて、背景を見せる面積を確保する必要があります。

img タグと違い、background-image は要素の大きさを自動で広げてはくれません。背景はあくまで要素の表示領域に描かれる、という点を押さえておくと混乱しにくくなります。

症状別チェック表

背景画像が表示されないときの原因と対処は、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

原因を切り分ける手順

背景が出ないときは、画像が届いているのか、要素に面積があるのかを順に確認すると早く原因にたどり着けます。

1. 開発者ツールのネットワークタブで、画像が 404 などで失敗していないか確認する。
2. 失敗していればパスを見直す。url() は CSS ファイルからの相対パスである点に注意する。
3. 画像が届いているのに見えないなら、要素の高さがゼロでないか確認する。
4. 高さがなければ height や min-height、padding で表示領域を確保する。
5. background-size や background-repeat、background-position の指定で意図どおり描画されるか確認する。

url()やショートハンドの記述ミス

url() の中身の書き方も見落としがちな原因です。パスにスペースや特殊文字が含まれるときは引用符で囲む必要があります。引用符の付け忘れや、url と括弧の間に余計な空白が入ると、指定が無効になることがあります。

background のショートハンドで色や位置などをまとめて書いているとき、いずれかの値が不正だと、その宣言ごと無効になって背景画像も出ないことがあります。切り分けのため、まず background-image だけ単独で書いて出るか試すのが有効です。

また、背景を別の要素や疑似要素、半透明のオーバーレイが覆っていて、画像自体は表示されているのに見えない、というケースもあります。重なり順も合わせて確認してください。

画像入りページを実機で確認してもらう

背景画像はパスの基準が環境で変わりやすく、自分の手元では出ても、相手の環境やアップロード後に出ないことがあります。実際に公開した状態で表示されるかを確かめてもらうのが確実です。

ギガサイト便なら、CSS と画像を含むサイトを ZIP にまとめてドロップするだけで、相対パスを保ったまま 〇〇.giga-site.com の共有 URL が発行されます。相手はリンクを開くだけで、背景画像が正しく出ているかを実機で確認できます。

同じ URL のまま中身を差し替えられるので、パスやサイズ指定を直すたびにリンクを送り直す必要はありません。HTTPS は自動で付き、エッジ配信で画像の読み込みも速いため、表示確認のやり取りがスムーズです。