background-image: url() works when all files on desktop but not with files in their folders

When using the background-image url() to set a full cover background image I have encountered what seems like a glitch that I can't figure out. When I have the index.html file, the main.css file and the image file on my desktop the image shows up fine in the browser. However, when I move the .jpg to an imgs folder and the .css file enter image description hereto the css folder the image won't appear in the browser.

The code is exactly copied from W3, so I'm thinking it must be a problem with my folder structure, but I can't see it. I've never seen this issue before. Thanks in advance!

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>My Site</title>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
  </head>

  <body>
    <div class="bg"></div>
  </body>
</html>


body,
html {
  height: 100%;
}

.bg {
  background-image: url("/imgs/ocean.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Solution

Use this syntax instead: Because ./ refers to the current folder, ../ refers to the parent directory and that one should be used.

background-image: url("../imgs/ocean.jpg");