background-imageが反映されない

前提・実現したいこと

スタイルシートから背景を設定したいです。
画像は、スタイルシートと同じフォルダのimageフォルダ内にあります。形式はjpgです。
背景を指定したい部分は

<div id="home" class="bg">の部分です。 CSSでは#homeで引っ張っています。

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

スタイルシートにbackground-imageを打ち込んでも、まったく反映されません。
ソースコードは以下の通りです。

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3
4
5<!-- headのスタート　-->
6
7
8   <meta charset="utf-8">
9   <title>Progete</title>
10   <link rel="stylesheet" href="stylesheet.css"/>
11 
12 </head>
13
14 <body>
15
16 ** <div id="home" class="bg">**
17 <header>
18   <div  class="top">
19  <h1><img src="ロゴ画像"></h1>
20       <nav>
21        <ul>
22          <li><a href="news.html">news</a></li>
23          <li><a href="menu.html">menu</a></li>
24          <li><a href="contact.html">contact</a></li>
25        </ul>
26       </nav>
27   </div>
28  </header>
29
30 <div class="main">
31   <h2>We'll Make Your Day</h2>
32   <p>おしゃれなカフェで癒されてみませんか？。</p>
33   <a href="menu.html">メニューを見る</a>
34 </div>
35
36 
37 </div>
38 
39   <div class="main">
40   
41   </div>
42   
43   <div class="contact-form">
44    
45   </div>
46  <!-- bodymain -->
47
48  <!-- footerlogo -->
49   <div class="footer">
50    
51  </div>
52  <!-- footerlogo -->
53
54 </body>
55
56
57</html>

CSS
1html{font-family:serif;
2     color: brown;
3    line-height: 1.7;}
4
5/*------header------*/
6**#home{**
7  height:500px;
8  min-width:100%;
9**background-image:url("image/main-bg.jpg");**
10}
11.bg{
12 background-size:cover;
13 background-position: center top;
14 background-repeat: no-repeat;
15}
16.top{display:flex;
17     justify-content: space-between;
18     text-transform: uppercase;}
19header h1{
20    width:150px;
21    height:100px;
22    margin-top: 1%;
23    margin-left:3%;
24}
25
26nav ul{
27    display:flex;
28}
29nav li{
30    list-style:none;
31    margin:1% 50px 0px 10px;
32    color:brown;
33    font-size:1.3em;
34}
35header a{
36    text-decoration: none;
37    color:brown;
38}
39
40.main{
41    text-align:center;
42}
43.main h2{
44    margin-top:80px;
45    margin-bottom:10px;
46    font-size: 50px;
47    font-weight: bold;
48}
49.main a{
50    color:#fff;
51    background:#0bd;
52    padding:10px 26px;
53    border-radius:5px;
54}

試したこと

以下の事を試しました
①背景色がつくかどうか→色は<div id="home">につきます
②スタイルシートと同じフォルダに画像をを入れた→反映されない
③高さや横幅を指定→反映されない

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

VSコードを使っています。
画像はウェブからダウンロードした教材です。
分かる方、ご教授頂けましたら幸いです。

meg_

2021/02/05 23:51

実際のものには「**」はないのですよね？　手元で試しましたが状況が再現しません。エラーが出ていないことは確認されましたか？

Lhankor_Mhy

2021/02/06 01:43

VSコードを使っているとのことですが、「スタイルシートと同じフォルダのimageフォルダ内」はVSCodeの同一ワークスペース上でそうなっているのですか？　ワークスペースでの位置関係がエクスプローラ（ファインダ）と同一とは限りませんが、そちらで見てもそうなっていますか？

aiueo1107

2021/02/08 04:08

meg様ご回答くださり、ありがとうございます。 **はありません。強調する為に書きましたが、初めての利用で勝手が分かっておりませんでした。エラーコードはグーグルクロームのデベロッパーツールを使用しましたが、出ておりません。 Lhankor様申し訳ありません、非常に分かり辛い文で質問をしてしまいました。 ●ソースフォルダ　・image ー画像　・スタイルシートといったような位置関係です。

Lhankor_Mhy

2021/02/08 04:25

ご解決されて何よりです。

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

回答1件

ベストアンサー

画像もCSSもJSも同じですけど、「ファイルを置いた場所（パス）を正しく記述する」です。
リンク記述が書かれているファイルから辿れる場所を正しく指定すること。

「相対パス」「絶対パス」などで確実におさえてください。

非常によく出る部類の質問なので、過去質問を参考に。

スタイルシートと同じフォルダのimageフォルダ内にあります

文章説明では基本伝わりませんので、
分かる図の提示を。

投稿2021/02/06 00:00

編集2021/02/06 00:13

m.ts10806

総合スコア80861

aiueo1107

2021/02/08 04:10

ｍ.ｔｓ１０８０６様ご回答くさだり、ありがとうございます。ファイルの位置を置き換え、何度も試しましたが、反映されませんでした。メモパッドで行うと何故か反映されます。しばらくはメモパッドを使用しようと思います。また、分かり辛い表現をしてしまい、申し訳ございませんでした。次回以降、図で提示いたします。ご指導ありがとうございます。