画像ファイル（jpg）を配置したが、background-image: urlで読まれない

Question

企業サイトのhtmlをローカル環境にコピーし、CSS側にjpgファイルのパスを下記のように記載したのですが、該当箇所にjpgファイルが表示されません。アイコンを乗せるとリンク扱いとなり、ジャンプはすることができております。

##やってみたこと

2278 .unit-btn-s01 a {                                          
2279   display: block;                                          
2280   background-image: url("img/map.jpg");                    
2281   background-repeat: no-repeat;                            
2282   margin-bottom: 1em;                                      
2283 } 

確かに画像ファイルがあることは確認しました。画像を表示するにはどのように改修すべきでしょうか。

Comments

[yoshinavi]

ローカル環境に画像もあるのは確認済みで良いのでしょうか？関連のCSSはほかに無いですか？できれば関連のHTMLも提示してください。

Answer 1

[フォルダ：hoge[フォルダfuga：[imgフォルダ：（画像ファイル）]（該当htmlファイル）（該当CSSファイル）]]
分かりにくいかもしれませんがこのような形で入っていると仮定して話します。
この場合サバ―環境では相対パスで「img/map.jpg」や「./img/map.jpg」で行けるのですが、ローカル環境では行けない事があります。
その場合、相対ルートパスで「hoge/fuga/img/map.jpg」の様に一番上のフォルダからパスを通してあげると上手くいきます。
私の場合XAMPPで疑似的にサーバーにアップしたようにしていますが、それでも相対ルートパスでないと上手くいかない事が多々あります。
一度相対ルートパスでテストしてみる事をお勧めします。

Answer 2

「img」フォルダの位置は合っているのでしょうか？
違う場合は相対パスを見直してみてください。

また、画像の名称も合っているか見直してみてください。