Background-Image not shown in browser

Question

So I tried to add a background image in the header and It's working fine when I open the HTML file from the editor as a live server, but when I open the file normally from the browser (without the live server in the VScode) the image not shown up.

.header{
  min-height: 100vh;
  background-image: url("/img/hero.jpg");
  background-size: cover;
  padding: 0 20px;
}

also, this error is shown to me(Failed to load resource: net::ERR_FILE_NOT_FOUND) but the image is already in the same direction

try this instead `background-image: url("./img/hero.jpg");` – ivan marchenko Jul 13 '22 at 14:14 — ivan marchenko, Jul 13 '22 at 14:14
https://stackoverflow.com/a/24254708/19068 – Quentin Jul 13 '22 at 14:22 — Quentin, Jul 13 '22 at 14:22
that does not work because it give wrong directory – assem_hasan Jul 13 '22 at 16:21 — assem_hasan, Jul 13 '22 at 16:21

score 1 · Answer 1 · answered Jul 13 '22 at 14:06

1

The Failed to load resource: net::ERR_FILE_NOT_FOUND means that a file can't be found. This can occur because there's the file doesn't exist, it's in a different directory than the one we specified, or its in the correct place but the name doesn't match the name specified. You can open image in the browser and get the url from it.

answered Jul 13 '22 at 14:06

Yohani De Silva

29
9

Thank you it's worked but I think when I need to send the source code it's better to add the image name than its URL so the problem still – assem_hasan Jul 13 '22 at 14:29

Background-Image not shown in browser

1 Answers1