Background image not showing up in preview


#1

Hi,

I’m new to Atom. I am trying to add a background image to my website by adding a file path to an image in the url() of the background property in my css page, but the image does not show up in my code previewer. I know that my html and css files are properly linked because the css affects my html. So, if it’s not a HTML to CSS link problem, what do I do? Thanks for your help! Here is my css code:

html , body {
background: url(C:\Users\Marbles\Documents\Coding Practice\Codecademy Project Files\Codecademy Final Project\Final Proj images\space-planet.jpg) no-repeat;
background-size: cover;

}


#2

Here is an update:

The background image shows up when the image is placed in the same directory as the css folder, but not if I move the image to its own folder. So it must be a directory problem. But, in effort to fix the directory path, if I place the image in its own folder and add the full path of the image to the url() of background property, it doesn’t show up in the background. Hmm, why is this and what do I do?


#3

More information about file URLs can be found here. This should work:

html , body {
  background: url("file://C:/Users/Marbles/Documents/Coding Practice/Codecademy Project Files/Codecademy Final Project/Final Proj images/space-planet.jpg") no-repeat;
  background-size: cover;
}

It would be a whole lot easier, though, to just have a relative link. This rule jumps up to the level above the css/ directory and then looks for an image directory:

html , body {
  background: url("../Final Proj images/space-planet.jpg") no-repeat;
  background-size: cover;
}