Verá, cada vez que trato de usar ../ en CSS o HTML, parece que no funciona, solo me da este error: GET file:///C:/Users/MYUSERNAME/Desktop/Coin%20Clicker/source/coin.png net::ERR_FILE_NOT_FOUND aunque usé ../images/ . Tenga en cuenta que coin.png está en images , no en la source . Sin embargo, si hago esto en javascript, que está en un archivo diferente al archivo HTML, parece funcionar. ¿Alguna idea de por qué ocurre esto? aquí está mi código:
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"; } });

Directorio de archivos:

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