Why isn't background-image not changing?-CodePudding

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;
}

CodePudding user response：

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.

CodePudding user response：

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>