You see, whenever I try to use ../ in CSS or HTML, it doesn't appear to work, It just gives me this error: GET file:///C:/Users/MYUSERNAME/Desktop/Coin%20Clicker/source/coin.png net::ERR_FILE_NOT_FOUND even though I used ../images/. Keep in mind coin.png is in images, not source. However, if I do this in javascript, which is in a different file than the HTML file, it does appear to work. Any idea why this occurs? here is my code:
CSS:

#coin {
  background-image: url("../images/coin.png");
  border: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 200px 200px;
  background-color: white;
  border-radius: 50%;
  width: 200px;
  height: 200px;
}
#coin:active {
  background-image: url("../images/coin-pressed-in.png");
}

HTML:

<div>
  <span id="count">0¢</span>
</div>


  <button id="coin" alt="coin" onclick="plusOne()"></button>


<script src="script.js"></script>

javascript:

var dollar = 0;
var cents = 0;
var count = document.getElementById("count");

function plusOne() {
  if (cents < 95) {
    cents +=5;
    count.innerHTML = cents + " ¢";
  } else if (cents == 95) {
    dollar = 1;
    cents = 100;
    count.innerHTML = dollar + " $";
  } else if (dollar >= 1) {
    dollar += 0.05;
    count.innerHTML = round(dollar, 2) + " $";
  }
}

function round(value, decimals) {
  return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
}

document.getElementById("favicon").href = "coin.png";

document.addEventListener("visibilitychange", (event) => {
  if (document.visibilityState == "visible") {
    document.getElementById("favicon").href = "../images/coin.png";
  } else {
    document.getElementById("favicon").href = "../images/coin-disabled.png";
  }
});

File directory:

- images/  
    * coin.png  
    * coin-disabled.png  
    * coin-pressed-in.png  
- source/  
    * coin.html  
    * script.js