Search code examples
cssgithubgithub-pages

Background Image shows up on Live-server, does not show up on Github Pages

my background image works perfect on live-server but on Github pages it does not display. I read that Github pages is case sensative and you need to change .jpg to .JPG. After doing this it made all my other images work except for this background image. Here is the line of code

.main-image {
    display: flex;
    justify-content: center;
    background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) ), url("../images/st-george.JPG");
    height: 200px;
    background-size: cover;
    height: 97rem;
}

I have also tried:

 url("/images/st-george.JPG")//Without the two dots before images "../images"

Again this works in live-server but not on Github pages.

When I try

 url("./images/st-george.JPG")//One dot instead of two

It does not work in live-server or on Github pages.

EDIT: link to my gitgub pages : https://calebm5577.github.io/Orthodox-Church-Website/index.html Link to github code: https://github.com/Calebm5577/Orthodox-Church-Website

Solution

  • From your css stylesheet located in css/style.css it reads : 

    .main-image {
  display: flex;
  justify-content: center;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("./images/st-george.JPG");
  height: 200px;
  background-size: cover;
  height: 97rem; }

    which matches with the code on your repository

    So it tries to get the image from css/images/st-george.JPG which doesn't exist

    If you change it to the following it will work : 

    linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/st-george.jpg)

    Your filename is st-george.jpg, not st-george.JPG