Unable to get background image working, could NodeJS be the problem?-CodePudding

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <section>
      <h1>Hello, world! (index.html)</h1>
      <input id="userName" type="text" name="" placeholder="Enter Name">
      <button id="clickMe" type="button" name="button">Click Me</button>
      <h2 id="personName"></h2>
      <h2 id="personStatus"></h2>
      <h2 id="personOccupation"></h2>
      <script type="text/javascript" src="/js/main.js"></script>
    </section>
  </body>
</html>

CSS

h1{
  color: red;
}

section {
  background-image: url("../coinflip.jpg");
  background-size: cover;
}

Here is the folder structure:

I have tried the above code and:

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

I don't understand why it's not working.

The only thing I can think of is that it has something to do with Node.js

It is my first time trying to learn it, so maybe my server.js file is causing problems?

In the server.js file I have

switch (page) {
case '/css/style.css':
      fs.readFile('css/style.css', function(err, data) {
        res.write(data);
        res.end();
      });
      break;

But the switch case is working for all the other pathnames, so I'm really not sure

CodePudding user response：

If the file is in the same folder, you have to use:

“./coinflip.jpg”

If the file is outside of the current folder (go back folders), you have to use:

“../coinflip.jpg”

I would try the first option, and also would fix it on your node.js.

CodePudding user response：

i think you are using path in wrong way

<link rel="stylesheet" href="./css/style.css">

ans use accordingly.