Search code examples
htmlcssgithublocalhost

Picture not showing up on GitPages, but works perfectly on local host

I'm new to website design and I'm building a website for the company I work for. My site works perfectly on my local host, exactly how I wanted it to... but I am facing a problem with the top banner not showing up at all on my GitPage. (and also my favicon stopped working somewhere along the way and I didn't notice).

In my style.css, I've set the background image to a picture (Topbar1.png), and have it so that it is a different picture on smaller screens (Topbar2.png). [located in style.css lines 83 and 89].

Neither of these are working on Gitpages. I've looked for different solutions on Stack Overflow, but I haven't been able to figure it out.

This is a link to my repository:

And a link to my GitPage:

-I'm pretty sure my relative path is correct--I'm coding in VS code and this is how their autocomplete feature writes the path when I am selecting my pictures--but I did try different paths just in case.

-I have tried renaming the files (being very careful to use the exact case) and also tried using a different files altogether to see if that would show up. I checked the repository on GitHub to make sure the code is written and uploaded exactly how I had written it. I can also go into my repository and click on the files and the pictures do show up.

-I've cleared my cache and even tried making a different repository with the same files to see if the GitPage would work differently. I've also tried opening my GitPage on my phone and a different computer. It's definitely not working, and since I've been working on this problem over different a couple of days, it is definitely not just GitPages being slow to reflect my changes.

My favicon, (the file I've named mIcon.jpg) was definitely displaying in the beginning and I broke it, but going through my history hasn't been able to help me pinpoint exactly what I did to make it stop working. [located in index.html line 13].

I'd really appreciate the help, I don't understand how it can work on localhost, but not on GitPages and I don't know anybody IRL who can help me with this problem.

Edit: the css code

#topbar {
  height: 90px;
  font-size: 14px;
  transition: all 0.5s;
  color: #ffffff;
  padding: 0;
  background: linear-gradient( #000000, #8b0000);
  background-image: url("/assets/img/Topbar1.png");
  background-size: cover;
}

@media (max-width: 1100px)  {
  #topbar{
  background-image: url("/assets/img/Topbar2.png");
  background-size: cover;
  }
}
Solution

  • If you open Developer Tools and go to Console you can check where the website looks for the missing resources. In your case its trying to locate the image here: https://dkirov1.github.io/assets/img/Topbar1.png

    But the correct url should be:

    https://dkirov1.github.io/MDTRedesign/assets/img/Topbar1.png

    To fix that, in your css, instead of using:

    background-image: url("/assets/img/Topbar1.png");

    Use:

    background-image: url("../img/Topbar1.png");

    Same goes for Topbar2.png.

    Regarding the favicon, change:

    <link href="/assets/img/mIcon.jpg" rel="icon">

    To:

    <link href="assets/img/mIcon.jpg" rel="icon">