エラー:bg-img表示したいが404エラーの原因を知りたい

前提・実現したいこと

表題の通り、４０４エラーがdevelop toolに表示されます
→解決していますが、疑問なので、質問します。

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

GET http:～/img/oheya-header.png 404 (Not Found)

試したこと

フォルダー構成が、原因のように思えました。

ファイル/フォルダー構成↓

変更

コーダーフォルダーで書きました

<ⅹフォルダー>
　　<top(index.html)>
　　<-imgフォルダー>
　　<-Aふぉるだー>
　　<-Bフォルダー>
　　<-Cフォルダー>
　　-<js>
　　-<css>
　　-<scss>
</ⅹフォルダー>

<今回のAフォルダー>
　　<img>a'.png</img>
　　-<js>
　　-<css>
　　-<scss>
</今回のAフォルダー>

追記

ディレクトリー構図は下記です。

✕フォルダー
　　├<top(index.html)>
　　├<-imgフォルダー>
　　├-<js>
　　├-<css>
　　├-<scss>
　　├<-Bフォルダー>
　　├<-Cフォルダー>
　　├
　　├<-Aふぉるだー>
            └ <img>a'.png</img>
            │   
             └ -<js>
            │
             └ -<css>            
            │
             └ -<Scss> 

            │

結論
解決策
1bg-img url()→Aフォルダー/imgを設定すると、反映される
2.bg-img url()→topと同列にあるimgファイルを指定すると、反応なし。

この原因は、フォルダー構成だと考えていますが、どこで設定を変更したら
top/imgを指定しても、反映できるのでしょうか？

教えていただけると幸いです。

よろしくお願いいたします。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4	<title></title>
5</head>
6<body>
7	<section class="fv">
8		<div class="fv-img">
9			<h1>お部屋</h1>
10		</div><!-- /.fv-img -->
11	</section><!-- /.fv -->
12</body>
13</html>
14

CSS
1
2.fv {
3  background-image: url(../../img/oheya-header.png);
4  background-position: center;
5  background-repeat: no-repeat;
6  background-size: cover;
7  width: 100vw;
8  height: 50vh;
9  position: relative;
10}
11
12.fv-img {
13  position: absolute;
14  top: 50%;
15  left: 50%;
16  -webkit-transform: translate(-50%, -50%);
17          transform: translate(-50%, -50%);
18}
19
20.fv-img h1 {
21  display: block;
22  text-align: center;
23  font-weight: 900;
24  font-size: 3.4rem;
25  color: #fff;
26  z-index: 99;
27}

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

ファイルとフォルダーの位置通りに自動的に表示されるプラグインを使って、相対パスで書いています。
→そのため、相対パスのミスは考えにくいです。

miyabi_pudding

2021/12/01 08:47

> ファイル/フォルダー構成並列に並べられたら第三者にはどういう構造になっているかまったく理解できません。コードブロックを使うなどして、わかりやすい記載をお願いします。 > bg-img これは、クラスでしょうか、それとも”背景画像”であることを示しているのでしょうか。質問の内容からは、これがいかなるものか読み取ることができません。（ソースコード中にも同文字列のものが存在しないため） CSSは、HTMLからいかように読み込んでいるのでしょうか。それによっても、答えが変わってきます。

free_teku

2021/12/01 09:11

ご回答ありがとうございます。修正しました bg-imgは、背景画像のことです。わかりにくく申し訳ありません。恐れ入りますが、ご回答いただけると幸いです。

miyabi_pudding

2021/12/01 09:33

まず、このコメント欄は回答ではなく、質問修正依頼のコメント欄なので、お間違い無く。質問修正、ありがとうございます。 > 位置通りに自動的に表示されるプラグインを使ってこれはいったいどのようなものでしょうか？もし、CMSを使っている、フレームワークを使っている、などありましたら、そのツールも記載してください。（質問タグも追加してください）相対パスなどはあっているように思いますので、そのツール・プラグインなどが逆に悪さをしているように思います。（もしくは使い方を間違っている）

m.ts10806

2021/12/01 11:46

申し訳ないですが、この表現でも構成分りづらいです。

Lhankor_Mhy

2021/12/02 00:16

<js> はファイルですかフォルダですか？

free_teku

2021/12/02 05:56

Lhankor_Mhyさん、質問ありがとうございます。 jsフォルダーです。

Lhankor_Mhy

2021/12/02 06:00

ということは、 <top(index.html)> は、「topフォルダにindex.htmlがあるよ」という表現ですか？

free_teku

2021/12/02 06:25

そうですね。そうなります

Lhankor_Mhy

2021/12/02 07:01

<今回のAフォルダー>は<ⅹフォルダー>と同じ階層ですか？

free_teku

2021/12/02 07:46 編集

いえ、違います。Aフォルダーは、img index.htmlなどとは同じ階層です、

Lhankor_Mhy

2021/12/02 08:20

index.html は topフォルダの中にあるのでは？

Lhankor_Mhy

2021/12/02 08:22

もしかして、topフォルダの後に書いてあるものは全てtopフォルダの中にあるのですか？

free_teku

2021/12/02 08:37

いいえ違います。 ✕フォルダーの中に、Aフォルダーなどがあり、それ以外は同階層です。 ✕フォルダーが親要素で、それ以外が同列です。その下には、Aフォルダーの改装を詳しく書いています。ご教授頂けると幸いです

Lhankor_Mhy

2021/12/02 08:39

では、「Aフォルダーは、index.htmlなどとは同じ階層」というコメントをされていますが、これは間違いですか？

Lhankor_Mhy

2021/12/02 08:41

もしかして、index.html がふたつあるとか？

miyabi_pudding

2021/12/02 09:25

質問者さん、階層を示す際によく用いられる記号を使いましょう。 ∟や├ などです。 https://qiita.com/paty-fakename/items/c82ed27b4070feeceff6 でコピペできます。とかく、階層を第三者に伝わるような表記にしないことには、本件は解決できないものと思いますので、一般的な表記になるよう内容を修正してください。

free_teku

2021/12/02 09:36

承知しました。書き直しました。ご回答よろしくお願いします。

miyabi_pudding

2021/12/02 10:02 編集

あと一歩・・・・。コードブロックを使い、階層ごとにインデント付けましょう。階層下のものには相応の分のインデントを付けて、下階層であることを示してください。 index.htmlと、imgディレクトリは階層同じですよね？であれば、同じインデントにすべきです。（同階層は頭を揃えるということ）私が送った、参考URLをもっとよく見て真似ましょう。

Lhankor_Mhy

2021/12/03 00:11

windows なら tree コマンド一発なんですけどね。 Mac にはないのかな？