プログラミング

【CSS】背景画像が映らない。を解決! ポイントは「相対パスをコピー」です。

スポンサーリンク

背景画像

今回は、「CSSで背景画像を設定したのに映らない」を解決します。

ただし、VScodeを使用している人へ向けた解決策です。

 

チェックポイント

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

例えばこんな感じです。

  1. 相対パスの場合、相対パスのルートは合っているか
  2. 画像のファイル名は合っているか
  3. HTMLとcssに誤字がないか
  4. 全角スペースが混入していないか
  5. background-imageを表示するだけの幅や高さが足りているか

などなど

 

注目ポイント

どれも間違いはない。なんでだろう。

と悩んでしまっているあなた。

VScodeを使用している方はこのまま最後までお読みください。

ここからがポイントです。

VScodeでは、サイドバーに表示されている画像ファイルを右クリックすると「相対パスをコピー」という項目が出てきます。

そしてこれを貼り付けすると、

普通はこのようなコード。
/top/img/xxxx.jpg

しかしこのスラッシュ「/」に注目です。

背景画像が反映されない人は、「/」が「¥」になっている可能性があります。
ですので、この「¥」を「/」に変えてみてください。

まとめ

もちろん「¥」でもしっかり表示される場合もあります。
というか表示されることの方が多いと思います。

正直なぜ、「¥」だと表示されないのか、は不明ですが、実際私自身が経験しました。
貼り付けているから「間違っていない」と思い込み、この部分はスルーしてしまう可能性があります。

かなりイレギュラーなパターンですが、もし記述が合っているのに画像が反映されない、という方は是非チェックしてみてください。

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

スポンサーリンク

-プログラミング
-, , , , , , ,

© 2022 サカらいふ Powered by AFFINGER5