CSS background-image not loading

Question

I am having an issue getting my background-image to load as a live website (using github pages). When i load it locally I can get it to work by entering in the full directory. However when I then move it to Github the directory changes and so it no longer works. To summarise, when I use background-image url("images/picture.jpg"); it will not work at all. I have to type in background-image url("c/onedrive/webroot/images/picture.jpg"); so the whole file name. However that does not work when put onto Github. Any help would be much appreciated. (:

Answer 1

As others mentioned, it seems like a file path issue. When using relative paths like images/picture.jpg , make sure the target image is in the correct relative location as indicated. If your images folder is located at the project root, your background-image url had safer/better be /images/picture.jpg with the / at the beginning to denote the project root.

Update

Looking at your code on the repo, I fixed it by updating the relative path — background-image: url("../images/abstract.jpg");

Your folder structure looks like...

/
|
├── css/
├── images/
├── js/ 
├── objects/
└── video/

Since your stylesheet in css folder is pointing to a file in images folder, you'd need to use a correct relative path.

Answer 2

I have faced this problem before. If you're background-image doesn't work check if your path is correct you could also right click the image in the file browser open Properties --> Security and copy the path from there. If this doesn't work copy the image address directly from the browser and paste it there.

Answer 3

Check your path is correct

body {
 background-image: url("path_of_image_from_this_page.jpg");
}