background-imageが表示されません。

コード
```### 前提・実現したいこと

こんにちは。htmlとcssを学習している初学者です。
cssで背景に画像を表示したいのですが、画像が表示されず困っています。
初歩的な内容だと思いますが、調べた内容を試しても解決しなかったため質問しました。

現在「1冊ですべて身につくHTML＆CSSとWEBデザイン」という本のフルスクリーンページを作成しています。その中で案内されているサンプルデータを使用して、background-imageを追加しているところです。
ディベロッパーツールでエラーが出るということは、画像の保存の仕方が問題があるのか、入力コードミスなのか教えていただけると助かります。

よろしくお願いします。



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

ディベロッパーツールでエラーメッセージが出ています。
filed to load
resource:net::ERR_FILE_NOT_FOUND


### 該当のソースコード
```html
<body>
    <div id="home" class="big-bg">
    <header class="page-header wrapper">
        <h1><a href="index.html"><img class="logo" src="../img/logo.svg" alt="WCBカフェホーム"></a></h1>
        <nav>
            <ul class="main-nav">
                <li><a href="news.html">News</a></li>
                <li><a href="menu.html">Menu</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>

    </header>
    <div class="home-content wrapper">
        <h2 class="page-title">We'll Make Your Day</h2>
        <p>おしゃれなカフェで癒されてみませんか？無添加の食材で体の中からリフレッシュ。</p>
        <a class=button href="menu.html">メニューを見る</a>

    </div><!--/.home-content-->
</div><!--/*Home-->
</body>

css
1
2
3/*大きな背景画像*/
4.big-bg{
5    background-size: cover;
6    background-position: center top;
7}
8#home{
9    background-image: url(/img/main-bg.jpg);
10    background-size: contain;
11}
12
13

試したこと

・画像の保存先フォルダの変更
・background-colorで色を指定してみた。
→色は配置できました。

・他の画像でも試してみた。
・画像のファイル名を変えてみた。
・background-size:contain;を付け加えてみました。

補足情報（FW/ツールのバージョンなど）

VSコードで書いています。
ブラウザはChromeです。
PCはasusを使用しています。

・マークダウンやってみました。教えていただきありがとうございます。
勉強になりました。
・VSコードのindex.htmlをグーグルクロームのタブに貼り付けて確認しております。
（すみません、何もかも初めてなもので回答が間違っていたらすみません、教えてください。）
・ファイル一式がHTTPアクセスかという質問に対して、確認する仕方がわかりませんでした。教えていただけると助かります。
・「＃」の全角はコードは質問する際コードを貼り付けた時、半角だと表示されなかったので全角で打ってしまいました。すみません。

m.ts10806

2021/10/04 03:53

コードはマークダウンのcodeにてご提示ください。あと、提示のファイル一式はhttpアクセスですか？動作確認の仕方も具体的に記載してください。

Lhankor_Mhy

2021/10/04 04:19

♯home{ ↑これが全角だと思います。

Lhankor_Mhy

2021/10/04 04:54

質問の編集を拝読。ファイルのフォルダ構成を教えてください。パスの問題のような印象です。

tombow903

2021/10/04 05:12

返信ありがとうございます。 ∨WCB CAFE ∨HTML ∨css #style.css <>index.html ∨img main-bg.jpg このようになっています。

Lhankor_Mhy

2021/10/04 05:17

cssフォルダにhtmlが入っているという理解で合っていますか？

tombow903

2021/10/04 05:21

HTMLファイルの中に CSSフォルダ（その中にstyle.css）とindex.htmlが入っています。

Lhankor_Mhy

2021/10/04 05:36

わからないです。図で示してほしいのですが、m.ts10806さんのご回答で解決するのであれば、追記は不要です。

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

回答1件

ベストアンサー

グーグルクロームのタブに貼り付けて確認しております。

要はファイルをドラッグアンドドロップしているということになるので「httpアクセス」ではありません。
httpアクセスはWebサーバー上にプログラムを配置しhttp://のようなURLでアクセスすることを言います。
現状ではfile://のようになっているのでは。

となると、パスの指定の仕方がおかしいということになります。

background-image: url(/img/main-bg.jpg);

/から始まっているので「ルートディレクトリからの絶対パス」を指定しています。
例えば、file://となっていてWindowsなのでしたらC:がルートディレクトリになります。
つまりC:直下にimg/〜を配置すればこのcssの記述があるファイルの場所に関係なくとりあえず動くようにはなるでしょう。

ただ、このやり方だと今の構成が崩れるはずです。
今の構成を活かすのであれば「CSSの記述があるファイルからの相対パス」にすることです。

例えば、cssディレクトリ配下にあって、cssディレクトリとimgディレクトリが同じ階層なら
../img/main-bg.jpg
とか。「../」で「ひとつ上の階層」を表現できます。

絶対パスと相対パスについては必ずおさえておいてください。

投稿2021/10/04 05:12

編集2021/10/04 05:18

m.ts10806

総合スコア80875

tombow903

2021/10/04 05:30

回答ありがとうございます。説明がわかりやすく、勉強になります。現状File://から始まるようになっています。パスの指定方法が間違っているのですね。本の解説では background-image: url(../img/main-bg.jpg); とコードを打つように指示されていますので、私のフォルダやファイルの作成の仕方に問題があるのでしょうか。

m.ts10806

2021/10/04 05:33 編集

質問者さんは url(../img/main-bg.jpg); ではなく url(/img/main-bg.jpg); と打たれてますよね。

tombow903

2021/10/04 06:03

ファイルパスの指定や、フォルダの階層の部分がよくわかっていませんでした。最初に使用する画像が入ったフォルダを作成して、VSコードでフォルダを開き、コードを打ちながらHTMLのフォルダを作成したりしていたので、ごちゃごちゃになってしまい参考書通りのコードを打っても反映されなかったのだと思います。おかげ様で相対パスと絶対パスのこともわかりましたし、もう一度作ってみようと思います。ありがとうございます。

m.ts10806

2021/10/04 06:08

「置いた場所を指定する」とか「指定した場所に置く」とか、間違いのない手順を確立してください。

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