相対パスがうまくいきません

前提・実現したいこと

webサイト画像を表示させたいです。
しかし、パスの設定につまづきうまくいきません。

ディレクトリは、
index.html
cssフォルダ
jsフォルダ
imgフォルダ
があり、
cssフォルダ内にcss,scss,cssmap
jsフォルダ内にjsファイル
imgフォルダ内に目的の画像
が入っている状況です。

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

GET file:///Users/0000/pythonBox/portfolio/css/img/portfolio-main.jpg net::ERR_FILE_NOT_FOUND

該当のソースコード

html
1<!doctype html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8    <!-- Bootstrap CSS -->
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
10    <link rel="stylesheet" type="text/css" href="css/style.css">
11    
12    <title>Hello,world</title>
13    <link rel='stylesheet' href='https://unpkg.com/ress/dist/ress.min.css'>
14    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,500,900&amp;subset=japanese" rel="stylesheet">
15    <link href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" rel="stylesheet">
16    <link rel="icon" href="img/favicon.ico">
17    <link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
18  </head>
19  <body>
20    <h1>New York Stories</h1>
21    <a class="anchor" href="#">Scroll</a>
22    <!--start portfolio　details -->
23    <div class="portfolio-detail-0"></div>
24    <div class="portfolio-detail-1"></div>
25    <div class="portfolio-detail-2"></div>
26
27    <div class="btn">
28      <a href="" class="btn btn--orange btn-c"><i class="fa fas fa-envelope"></i>お問い合わせはこちら</a>
29    </div>
30
31    <div class="btn">
32      <a href="" class="btn btn--orange btn-c"><i class="fa fas fa-envelope"></i>お問い合わせはこちら</a>
33    </div>
34
35  <script type="text/javascript" src="js/style.js"></script>
36   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
37    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
38    
39  </body>
40</html>

javascript
1var nystories = document.querySelector(".anchor").offsetTop;
2window.onscroll = function gradation() {
3  if (window.pageYOffset > 0) {
4 var opac = (window.pageYOffset / nystories);
5    console.log(opac);
6  document.body.style.background = "linear-gradient(rgba(51,102,102," + opac + "), rgba(0,51,51," + opac + ")), url(img/portfolio-main.jpg) no-repeat";
7  }
8}

scss
1html{
2    font-family: 'Noto Sans JP', sans-serif;
3  }
4
5  @font-face {
6    font-family: 'Calluna';
7    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/CallunaSansRegular.otf') format('opentype');
8  }
9  * { 
10    box-sizing: border-box;
11  }
12  body {
13    font-family: Calluna, Arial, sans-serif;
14    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(img/portfolio-main.jpg);
15    background-repeat: no-repeat;
16    background-attachment: fixed !important;
17    background-size: 100% !important;
18    background-position: center top !important;
19    padding: 1rem;
20    padding-top: 45%;
21    color: #fff;
22    z-index: 1;
23  }
24

試したこと

javascriptのurlを../img/portfolio-main.jpg
にしてみましたがうまくいきませんでした。

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

回答2件

SCSSとJavaScriptの両方で、CSSのbackgroundに指定する画像のURLを指定しているので、どちらもcssフォルダーから見た相対パスを書いて下さい。あとは、(念のために)実際の画像ファイル名がportfolio-main.jpgになっているかどうかを確認してください。

SCSS
1background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(../img/portfolio-main.jpg);
2

Javascript
1document.body.style.background = "linear-gradient(rgba(51,102,102," + opac + "), rgba(0,51,51," + opac + ")), url(../img/portfolio-main.jpg) no-repeat";
2