Why isn't background-image not changing?

user_18581002 0
Viewed 39

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;
}
css-selectors css html
2 Answers

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.

user_38425980

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>

user_185937920
Related