background-image で指定した画像が表示されないことについて

Question

macのローカル環境に保存して作成していたフォルダ（html,css他画像の入っているﾌｫﾙﾀﾞ）をWindowsのＰＣに移行しブラウザでhtmlを表示させたところ、cssのbackground-imageで指定していた画像だけが表示されません。
html上のimgタグで指定している画像は表示されております。
またcssは基本的に効いているようにみえます。
エディターの画像のプレビュー機能ではbackground-imageで指定している画像が表示されるのですが、ブラウザでhtmlを読み込むと表示されません。

対処の方法があればご教示いただきたくお願いいたします。

Comments

[m.ts10806]

「効いているようにみえる」根拠は何でしょうか？
この質問を見ている方としては再現確認できる情報が何もないのでなんともいえません。追記願います

[ysktkhs]

ありがとうございます。
追記いたしましたのでご確認いただけると幸いです。

[ForestSeo]

imageのpathが間違っているのでは？

[sousuke]

相対パスで書いているならhtmlとcssのパスが違えばimgで表示されてもcssで表示されない可能性は十分あります。

[ysktkhs]

皆様ありがとうございます。
MacのＰＣで問題なく表示していたファイルを含むディレクトリを丸ごとwindowsPCに移動しただけだったので、パスは間違っていないと思っておりました。
Macの環境では問題なく表示されていたので。

しかし、あらてめて確認してみますと確かにファイルのパスの参照先が間違っていることが判明しました。
Mac環境では問題なく表示されておりましたので、不思議でいろいろと検証してみたところ、Macで使用しているvisual studio codeのlive serverによるHTMLのブラウザ表示では、パスが間違っていても私が意図したとおりに表示されるのです。
本来、background: url(../img/header.png);
とすべきところ、
background: url(/img/header.png);
と記述しておりました。これがvisula studio codeのlive severで表示確認するとどちらでも問題なく表示されてしまいます。試しにwindowsにもvs codeを入れて同じプラグインで表示させるとこちらもパスが間違っていても表示されます。

今回、macの不具合によって仕方なくWindowsのpcで作業し判明した間違いなのですが、結局visual studio codeでなぜ表示されていたのかが不明なままです。
もしこのような現象についてご存じの方がいらっしゃましたらよろしくお願いいたします。

[sousuke]

単純にルートを下げたのでは？不具合ではない気がします。

[Daregada]

live serverは、VS Codeで開いているフォルダーをドキュメントルートとして開発サーバーを起動します。ですから、絶対パスでも画像にアクセスできたんでしょう。

[ysktkhs]

>フォルダーをドキュメントルートとして開発サーバーを起動します。ですから、絶対パスでも画像にアクセ>スできたんでしょう。
この件が理解できないので自分なりに理解できるように勉強してみたいと思います。
ありがとうございます！

Answer 1

cssの画像のパスが間違っていないですか？
CSSファイルからみて、imgフォルダはどこに位置しておりますか？
それがわかれば、問題は解決できるのではないかと思います。
素人なので必ず正しいとは言えませんが。

Comments

[ysktkhs]

ありがとうございます。結局パスの間違いだったのですが、vscodeでは表示されていたので、その原因について別の方より
＞フォルダーをドキュメントルートとして開発サーバーを起動します。ですから、絶対パスでも画像にアクセ>スできたんでしょう。
と指摘いただきました。
よく理解できないので自分なりに勉強してみたいと思います。
ご回答ありがとうございました。