indexを直接開くとbackground-imageが読み込まれない件について

Question

前提・実現したいこと

index.htmlからサイトを開いたときにもbackground-image: url()で指定した画像が表示されるようにしたい。

発生している問題・エラーメッセージ

写真が表示されない。フォルダ全体をVisual Studio Codeで開いてからindexを拡張機能で開いた時には画像が表示される。しかし、ファイルからindex.htmlを直接開くと画像が表示されなくなる

該当のソースコード

HTML

ソースコード         header {
            background-image: url("/img/bg_header.jpg");
            /* 背景画像 */
            background-size: cover;
            height: 50%;
            /* 高さ */
            padding-top: 150px;
            /* 上がわの余白 */
            min-width: 100%;
            min-height: 100%;

試したこと

クォテーションマークで囲ったり色々。フォルダを圧縮する前はindexから直接開いてもしっかり画像が表示されていた気がする。

補足情報（FW/ツールのバージョン)

Visual Studio Code 。ブラウザはGoogleCrome

Answer 1

"/img/bg_header.jpg"

"img/bg_header.jpg"
ではどーでしょう
＃ってそのファイルはどこにある？

Comments

[syou_TRAHA]

ありがとうございます！
/　を取り除いたら解決しました！
ファイルは同階層のimg/bg_headerに入れてありました！

重ね重ね申し訳ないのですが、"/img"と"img"の違いは何でしょう？

[y_waiwai]

アタマの/はルートを表します
おそらく実行のさせ方によりルートディレクトリが変わってしまうってことでは。

んで、img/なんたら、って書くと、現在のディレクトリ（index.htmlがあるディレクトリ）のimgディレクトリを指します

[syou_TRAHA]

そうだったんですね！
ありがとうございます。