背景画像がなぜか反映されません...。

どこを見落としているのかがわかりません、、、。
どなたか背景画像が反映されない理由を教えて欲しいです。

やりたいことは、背景画像を固定したままその他のコンテンツをスクロールで動かすことです。
bodyにbackground-colorで色指定したらそちらは普通に反映されるのに、なぜか画像だと反映できません、、、。
bodyではなくヘッダーに画像挿入して固定した方が良いのでしょうか？
良い解決策方法があったら教えてください。

HTML5
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1">
6    <link rel="stylesheet" href="css/stylesheet.css">
7    <link rel="stylesheet" href="css/responsive.css">
8    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
9    <!-- jQuery -->
10    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
11    <script src="js/jquery.bgswitcher.js"></script>
12    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
13    <script>
14    //スムーズスクロール
15    $(function(){
16	     //任意のズレ高さピクセル数を入力
17	      var headerHight = 80;
18      $(function(){
19        $('a[href^="#"]').click(function() {
20          var speed = 500;
21          var href= $(this).attr("href");
22          var target = $(href == "#" || href == "" ? 'html' : href);
23          var position = target.offset().top-headerHight;
24          $('body,html').animate({scrollTop:position}, speed, 'swing');
25          return false;
26        });
27      });
28    });
29    </script>
30    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="crossorigin="anonymous"></script>
31    <script>
32    $(function() {
33      var h = $(window).height();
34      $('#main-contents').css('display','none');
35      $('#loader-bg ,#loader').height(h).css('display','block');
36      });
37      $(window).load(function () {
38      $('#loader-bg').delay(1500).fadeOut(1500);
39      $('#loader').delay(1500).fadeOut(1500);
40      $('#main-contents').css('display', 'block');
41      })
42    </script>
43    <title>portfolio.MatsudaYoshiki</title>
44  </head>
45  <body>
46    <!-- loding -->
47    <div id="loader-bg">
48      <div id="loading">
49        <img src="images/loader.gif">
50      </div>
51    </div>
52    <!-- contents start -->
53    <div class="wrap" id="main-contents">
54      <!-- menu -->
55      <div class="menu-wrapper">
56        <div class="container">
57          <div class="menu">
58            <ul>
59              <li><a href="#aboutPage" id="aboutBtn">About</a></li>
60              <li><a href="#skillPage" id="skillBtn">Skill</a></li>
61              <li><a href="#contactPage" id="contactBtn">Contact</a></li>
62            </ul>
63          </div>
64        </div>
65      </div>
66      <header>
67        <div class="container">
68          <h1><!--個人情報のため省略--></h1>
69          <p>Engineer</p>
70        </div>
71      </header>
72      <!-- about -->
73      <div class="about-wrapper" id="aboutPage">
74        <div class="container">
75          <h1 class="about-title">About</h1>
76          <div class="about gradient">
77            <div class="about-left">
78              <h1 class="about-subtitle">Profile</h1>
79              <p　class="aboutComment">
80<!--個人情報のため省略-->
81            </div>
82          </div>
83        </div>
84      </div>
85      <!-- skill -->
86      <div class="skill-wrapper" id="skillPage">
87        <div class="container">
88          <h1 class="skill-title">Skill</h1>
89          <div class="skills">
90            <div class="skill gradient">
91              <p class="skill-language">HTML</p>
92              <img src="images/html.png">
93              <p class="proficiency">習熟度：★★★★☆</p>
94            </div>
95            <div class="skill gradient">
96              <p class="skill-language">CSS</p>
97              <img src="images/css.png">
98              <p class="proficiency">習熟度：★★★★☆</p>
99            </div>
100            <div class="skill gradient">
101              <p class="skill-language">Javascript(jQuery)</p>
102              <img src="images/js.png">
103              <p class="proficiency">習熟度：★★★☆☆</p>
104            </div>
105            <div class="skill gradient">
106              <p class="skill-language">PHP/MySQL</p>
107              <img src="images/php.png">
108              <p class="proficiency">習熟度：★☆☆☆☆</p>
109            </div>
110            <div class="skill gradient">
111              <p class="skill-language">Git/illustrator/photoshop</p>
112              <img src="images/php.png">
113              <p class="proficiency">習熟度：★★☆☆☆</p>
114            </div>
115          </div>
116          <div class="site-link">
117            <p><b>スキルレベル参考模写サイト：</b><a href="https://yoshiki0804.github.io/isara/">https://yoshiki0804.github.io/isara/</a></p>
118          </div>
119        </div>
120      </div>
121      <!-- contact -->
122<!--個人情報のため省略-->
123      </div>
124      <footer>
125        <div class="container">
126          <p>Copyright © 2019 All Rights Reserved By MatsudaYoshiki</p>
127        </div>
128      </footer>
129    </div>
130    <!-- contents end -->
131  </body>
132</html>
133

css3
1*{
2  box-sizing: border-box;
3}
4html{
5  height:100%;
6}
7body{
8  font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
9  margin:0 auto;
10  height:100%;
11  background-image: url("images/background_image.jpg");
12  background-repeat: no-repeat;
13  background-attachment: fixed;
14  background-position: right bottom
15}
16li{
17  list-style: none;
18}
19/* wrap */
20.wrap{
21  overflow:hidden;
22}
23/* container */
24.container{
25  width:80%;
26  max-width:1600px;
27}
28/* lording */
29#loading{
30  position: absolute;
31  top: 50%;
32	left: 50%;
33	transform: translate(-50%, -50%);
34}
35
36#loader-bg {
37  position: fixed;
38  width: 100%;
39  height: 100%;
40  top: 0px;
41  left: 0px;
42  background: #fff;
43  z-index: 11;
44}
45/* menu */
46.menu-wrapper{
47  display:flex;
48  justify-content:center;
49  width:100%;
50  height:80px;
51  background-color:#e4e4e4;
52  position:fixed;
53  z-index:10;
54}
55.menu{
56  display:flex;
57  justify-content:center;
58  align-items:center;
59  text-align: center;
60}
61.menu li{
62  display:inline-block;
63  margin:0 30px;
64  letter-spacing:2px;
65  font-family:'Comic Sans MS';
66}
67.menu span{
68  font-size:26px;
69  color:#696969;
70}
71.menu a{
72  text-decoration:none;
73  background:linear-gradient(transparent 70%, #99ccff 70%);
74  color:#696969;
75  font-size:26px;
76  cursor:pointer;
77}
78/* header */
79header{
80  display:flex;
81  justify-content:center;
82  align-items:center;
83  width:100%;
84  height:940px;
85  text-align:center;
86  font-size:0;
87  font-family:'Comic Sans MS';
88  letter-spacing:2px;
89}
90header h1{
91  font-size:48px;
92  color:#696969;
93  margin:0;
94  opacity:0.7;
95}
96header p{
97  font-size:30px;
98  color:#696969;
99  margin:0;
100  opacity:0.7;
101}
102header span{
103  color:#000;
104}
105/* about */
106.about-wrapper{
107  display:flex;
108  justify-content:center;
109  align-items: center;
110  text-align:center;
111  width:100%;
112  height:860px;
113  margin:0 auto;
114  padding-bottom:50px;
115  letter-spacing:2px;
116}
117.about-title{
118  display:inline-block;
119  font-size:36px;
120  font-family:'Comic Sans MS';
121  border-bottom:2px solid #000;
122}
123.about{
124  display:flex;
125  justify-content:center;
126  text-align:center;
127  filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));
128  margin:0 auto;
129  padding:50px 50px;
130  width:100%;
131  height:600px;
132}
133.gradient {
134  background: linear-gradient(225deg, transparent 20px, #e4e4e4 20px);
135  background-position: top right;
136  background-repeat: no-repeat;
137  position: relative;
138}
139.gradient::before {
140  content: '';
141  display: block;
142  background: linear-gradient(225deg, transparent 20px, #333 20px);
143  width: 30px;
144  height: 30px;
145  position: absolute;
146  right: 0px;
147  top: 0px;
148}
149.about-left{
150  width:50%;
151  height:300px;
152  text-align:left;
153}
154.about-subtitle{
155  font-size:26Px;
156}
157.about-left span{
158  color:#ff0000;
159  background:linear-gradient(transparent 70%, #f08080 90%);
160}
161.about-right{
162  width:50%;
163  height:300px;
164  margin-left:60px;
165  text-align:left;
166}
167/* skill */
168.skill-wrapper{
169  display:flex;
170  justify-content:center;
171  align-items:center;
172  text-align:center;
173  width:100%;
174  height:860px;
175  color:#000;
176  letter-spacing:2px;
177}
178.skill-title{
179  display:inline-block;
180  font-size:36px;
181  font-family:'Comic Sans MS';
182  border-bottom:2px solid #000;
183}
184.skills{
185  display:flex;
186  justify-content: center;
187}
188.skill{
189  display:inline-block;
190  filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));
191  width:280px;
192  height:280px;
193  padding:20px;
194  margin:0 20px;
195}
196.skill img{
197  width:100px;
198}
199.skill-language{
200  font-size:14px;
201  font-weight:bold;
202}
203.proficiency{
204  font-size:16px;
205}
206.site-link{
207  display:inline-block;
208  width:90%;
209  height:auto;
210  font-size:20px;
211  padding:5px;
212  margin-top:50px;
213  background-color:rgba(255, 255, 255, 1);
214  border-radius:40px;
215  font-family:'Comic Sans MS';
216}
217/* contact */
218.contact-wrapper{
219  display:flex;
220  justify-content:center;
221  align-items:center;
222  width:100%;
223  height:780px;
224  margin:0 auto;
225}
226.contact{
227  display:flex;
228  justify-content:center;
229  align-items:center;
230  text-align:center;
231  filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));
232  width:80%;
233  height:400px;
234  margin:0 auto;
235}
236.contact-title{
237  display:inline-block;
238  font-size:36px;
239  font-family:'Comic Sans MS';
240  border-bottom:2px solid #000;
241}
242.contact_message{
243  width:50%;
244  text-align:center;
245  margin:0 auto;
246}
247.btn{
248  display:inline-block;
249  text-decoration:none;
250  font-size:30px;
251  color:#000;
252  margin:10px;
253}
254/* footer */
255footer{
256  display:flex;
257  justify-content:center;
258  align-items:center;
259  text-align:center;
260  width:100%;
261  height:80px;
262  background-color:#ffffff;
263  font-family:'Comic Sans MS';
264  font-weight:bold;
265  color:#696969;
266}
267

ちなみに相対パスは間違っていないです。

下記がファイルの位置です。
<portfolioフォルダ>
-以下portfolioフォルダ内-
・index.html
<images>
・background_image.jpg
<css>
・stylesheet.css
です。わかりますでしょうか？

※個人情報が含まれる箇所は省略してます。

kei344

2019/12/08 08:05

ファイルの位置関係を質問文に追記してください。

gerick

2019/12/08 08:37 編集

<portfolioフォルダ> -以下portfolioフォルダ内- ・index.html <images> ・background_image.jpg <css> ・stylesheet.css です。わかりますでしょうか？

kei344

2019/12/08 08:53

portfolioフォルダ内にimagesフォルダとcssフォルダとindex.htmlがある状態ですね？それであればKosuke_Shibuyaさんの回答どおりです。

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

回答1件

ベストアンサー

エスパー回答

css
1  background-image: url("images/background_image.jpg");

↓

css
1  background-image: url("../images/background_image.jpg");

投稿2019/12/08 07:50

退会済みユーザー

総合スコア0

gerick

2019/12/08 08:01

一番下に書いていると思いますが、相対パスは間違っていません。

退会済みユーザー

2019/12/08 08:02

客観的事実（エビデンス）はございますか？

gerick

2019/12/08 08:37 編集

<portfolioフォルダ> -以下portfolioフォルダ内- ・index.html <images> ・background_image.jpg <css> ・stylesheet.css です。わかりますでしょうか？

退会済みユーザー

2019/12/08 08:37

はい。回答の変更はありません。

gerick

2019/12/08 08:40

先ほどは反映されなかったのに、再度やってみると反映されました！相対パスの概念は知っていたつもりなのですが、、、パスの階層について何かわかりやすい説明をいただいてもよろしいでしょうか？？

退会済みユーザー

2019/12/08 08:41

css/stylesheet.css に記述しているのだから、css/stylesheet.cssから見た相対パスを書かなきゃいけないというだけ。

gerick

2019/12/08 09:31

完全に勘違いしておりました、、、。ありがとうございます！！

退会済みユーザー

2019/12/08 09:39

次回からは、「ちなみに相対パスは間違っていないです。」と書くくらいなら、エビデンスも合わせて書いてくださいね。

gerick

2019/12/09 22:39

大変失礼しました、、、！気をつけます！！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

背景画像がなぜか反映されません...。

関連した質問