SASS/CSS ~ Background: URL(); is not working

Question

I have tried everything and this is super frustrating. I can't add any images using CSS??? I am using background: url... before you say (needs linked to a folder, use a /, use a./). I have tried everything. It does not work. I am doing the "Battleship Project" from headfirst Javascript. I've even tried to copy this code snippet from the finished folder they've supplied and there code isn't working either. I am using VS Code.

//Just the problem portion I cut out for you ~ HTML

<div id="board">
      <!-- <img src="board.jpg" alt="" /> -->
      <div id="messageArea">hello world</div>
      <table>
        <tr>
          <td id="00"></td>
          <td id="01"></td>
          <td id="02"></td>
          <td id="03"></td>
          <td id="04"></td>
          <td id="05"></td>
          <td id="06"></td>
        </tr>
        <tr>
          <td id="10"></td>
          <td id="11"></td>
          <td id="12"></td>
          <td id="13"></td>
          <td id="14" class="hit"></td>
          <td id="15"></td>
          <td id="16"></td>
        </tr>

//SCSS, but CSS is linked to my html

$greenBG: rgb(83, 175, 19);
$formBgColor: rgb(152, 207, 113);
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
}

#board {
  position: relative;
  width: 1024px;
  height: 863px;
  margin: auto;
  background: url("board.jpg");
  #messageArea {
    position: absolute;
    top: 15px;
    left: 0;
    color: $greenBG;
    font-size: 2.5rem;
  }
}

You can review to full finished code supplied by Headfirst at https://www.wickedlysmart.com/hfjs/

its Chapter 8 folder

Thank you all so much

Answer 1

a web image works here like this!

the problem absolutly is with your file direction.

 #board{ background:url('https://i.stack.imgur.com/aQZM2.png'); }

 <div id="board"> <.-- <img src="board.jpg" alt="" /> --> <div id="messageArea">hello world</div> <table> <tr> <td id="00"></td> <td id="01"></td> <td id="02"></td> <td id="03"></td> <td id="04"></td> <td id="05"></td> <td id="06"></td> </tr> <tr> <td id="10"></td> <td id="11"></td> <td id="12"></td> <td id="13"></td> <td id="14" class="hit"></td> <td id="15"></td> <td id="16"></td> </tr> </table> </div>