背景画像が表示されない

実現したいこと

８個のグリッドアイテムの背景に設定した画像を表示させたいイメージ説明

発生している問題・分からないこと

背景画像を設定して、vscodeのlive serverで開いている時は画像が表示されているのですが、ファイルを直接開いてブラウザ表示させると画像は表示されず、検証ツールでも場所が見つからないというエラーコードが出ています。他に使用している画像と同じimgフォルダにはいっており、他の画像は問題ないので指定場所が違うというのも当てはまらないと思うのですが・・

該当のソースコード

css
1.guidance{
2  background-image: url(/img/wp2691_01.jpg);
3  width: 100%;
4  height: 100%;
5}

HTML
1 <section class="guidance">
2        <h2 class="section-title">診療案内<span>MEDICAL INFO</span></h2>
3        <div class="guidance-box">
4            <div class="box-item">
5                <img src="img/cadcam04.jpg" alt="">
6                <p class="description">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーで</p>
7            </div>
8
9※box-itemが8個あり。
10
11<div class="box-item">
12                <img src="img/20220330124002.jpg" alt="">
13                <p class="description">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーで</p>
14            </div>
15        </div>
16        
17    </section>
18

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

Googleで検索したりAIに質問してみたりしましたが、やはり指定場所が違うか、拡張子が間違っているのでは？など、同じ解決方法しか出てこず、「./」「../」など一通り書き直してみましたが変わりませんでした。補完機能で打ち込んだ状態ではファイル名に""はついてきませんでしたが、念のためいれてみても変わりませんでした。

補足

質問の内容にフォルダの場所の画像を追記しました。
index.htmlコピーとstyle.cssコピーを使用しており、画像はimgフォルダのなかにあります。
他に使用している画像は問題なく表示されています。
また、指定場所の問題だとした場合、vscodeのlive severでは表示されるのはなぜでしょうか？

maisumakun

2025/09/17 23:59 編集

CSSファイル・HTMLファイル・画像のファイル位置をご提示ください。

行動規範の内容に同意します

回答4件

ベストアンサー

/img/wp2691_01.jpgというパスは、プロトコルとドメインの省略と見なされますので、ルートからの場所を示しています。./img/wp2691_01.jpgと似ていますが、全く違う結果になる場合があります。
live server で表示したときと、HTMLファイルをダブルクリックしてfileスキームで表示したときとでは、ルートが異なりますので、このパスの表記ですと一方で見えたとしても他方で見えるとは限りません。

URL とは何か - ウェブ開発の学習 | MDN

投稿2025/09/18 00:38

編集2025/09/18 00:40