1

I am working on a website and I am trying to change the background image of the body but for some reason it is not working.

Error message: Failed to load resource: net::ERR_FILE_NOT_FOUND background-home-desktop.jpg:1

Code:

body {
  background-image: url(assets/home/background-home-desktop.jpg);
  background-color: black;
  color: #FFFFFF;
}
Christian
  • 4,902
  • 4
  • 24
  • 42
Edward
  • 61
  • 2

2 Answers2

0

Your path is wrong. The path assets/home/background-home-desktop.jpg does not exist. You use a path relative to your page. You need to use the correct file path. You could also use an absolute path if needed, see https://developer.mozilla.org/en-US/docs/Web/CSS/url

The url() CSS function is used to include a file. The parameter is an absolute URL, a relative URL, a blob URL, or a data URL. The url() function can be passed as a parameter of another CSS functions, like the attr() function.

As you haven't shared your file structure, it's hard to tell what's correct.

Christian
  • 4,902
  • 4
  • 24
  • 42
  • I know. The reason I didnt is because I am not allowed to post images – Edward Mar 27 '22 at 02:03
  • You can still describe it using text :) – Christian Mar 27 '22 at 02:07
  • starter-code > assets > home > background-home.jpg and the index.html is on the starter-code level. – Edward Mar 27 '22 at 02:12
  • Have you tried `/assets/home/background-home-desktop.jpg` or `./assets/home/background-home-desktop.jpg`, see also https://stackoverflow.com/questions/32405812/failed-to-load-resource-neterr-file-not-found-loading-json-js – Christian Mar 27 '22 at 02:13
  • Anything special about the website? Do you use GitHub pages, is it just locally, or do you use anything else? Can you post your HTML? – Christian Mar 27 '22 at 20:21
0

Well if this is the copy of your code, then you simply forgot the quotes. Example:

body {
  background-image: url("https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg");
  background-color: black;
  color: #FFFFFF;
  
  background-repeat: no-repeat;
  background-size: cover;
}

h1 {
  color: yellow;
  font-size:  4rem;
  text-align: center;
  text-transform: uppercase;
}
<h1>Hello World</h1>
David Mclean
  • 1