3

After finishing my website locally using HTML5, SASS (Koala for compiling) and a bit of jQuery, I uploaded it to GitHub and hosted it on git pages. Everything works flawlessly except that my background images are not showing up. Using the 'Inspect element' I found out that deleting one '../' from the URL specified for the img file background-image: URL("../../img/background.jpg"), solves the problem and the background image is shown.

The thing that confuses me is that I uploaded the structure from my PC straight to Github without modifying anything. Plus, I checked the structure of the project in my repo and it doesn't make sense that the background-image shows after deleting one '../' because there are two folders that you have to get out of to reach the image.

This just doesn't make sense. Can anyone explain what is happening?

P.S. Basic representation of my project structure:

  • index.html
  • folder: img
  • folder: sass
    • research-pages
      • SASS FILE

Inside this folder is my specific sass file where I type my styling. You have to go up two folders to reach the img folder where my background.jpg is located.

Gaurav joshi
  • 1,743
  • 1
  • 14
  • 28
bird_blue03
  • 137
  • 1
  • 2
  • 9
  • Could you use code formatting (to take advantage of multiple spaces) to draw your folder structure more clearly please? It would be nice if you could show background.jpg and _reference.scss for clarity. – i7nvd Dec 14 '16 at 19:03
  • I'm deleting my answer because I'm no longer sure. I've tested it locally and run into the same situation as you. Locally, just one ../ does not work. But on GitHub, either their directory structuring method is different (AKA `../` means the parent folder and also the parent folder's level) or perhaps things somehow got moved around during your git push. Can you send us a link to your gh-pages repo? – Kyle Vassella Dec 14 '16 at 20:30
  • 1
    @KyleVassella I tried uploading my website to different host and, guess what? No problems with both `../../`! I guess the problem is connected with GitHub.. – bird_blue03 Dec 14 '16 at 21:09

1 Answers1

0

edit: With your file structure, just one ../ should take you to the sass folder. But on GitHub, perhaps their directory structuring method is more forgiving than the 'correct' way (perhaps ../ means both the parent folder and the parent folder level).

Some other possibilities: maybe things somehow got moved around or arent' uploading the way you think they are during your git add/commit/push, or possibly I'm interpreting your file structure incorrectly, or maybe you're mistaken with what you are seeing (though I tend to believe you - I will test this myself soon). Can you send us a link to your gh-pages repo?

Kyle Vassella
  • 2,296
  • 10
  • 32
  • 62
  • Thank you for the answer! Yes, when I was testing it locally, the image was showing properly with `../../` – bird_blue03 Dec 14 '16 at 19:52
  • Another thing, one `../` goes on the level of the sub-folders of the folder 'Sass'. Logically, you need another `../` to go on the level of the 'Sass' and 'img' folders. This is the thing that really bugs me... – bird_blue03 Dec 14 '16 at 20:01
  • 1
    Actually, `./` goes to the sass subfolder. `./` is the folder that the current working file is in. `../` is the parent of the directory the current working file is in: http://stackoverflow.com/questions/7591240/what-does-dot-slash-refer-to-in-terms-of-an-html-file-path-location – Kyle Vassella Dec 14 '16 at 20:05