Search code examples
cssgithub-pages

Background images not showing on GitHub pages

I know there have been several posts about images not showing up in GitHub Pages, but the solutions don't seem to fix my problem. On my local machine and on Netlify the page works correctly, but on GitHub Pages I'm missing all my images.

All the images give this error:

Failed to load resource: the server responded with a status of 404 ()

This is the link to the Github Page: https://mfagaikema.github.io/BarbershopWebsite/

This is the link to my repo: https://github.com/MFAGaikema/BarbershopWebsite/

What am I missing?

Solution

  • Here is your code and make appropriate changes;

    <link rel="stylesheet" href="src/css/style.css">

    gives https://mfagaikema.github.io**/BarbershopWebsite/**src/css/style.css

    Now css code as following; linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/images/3day-shave-course.jpg) gives
    https://mfagaikema.github.io/images/3day-shave-course.jpg

    /BarbershopWebsite/ is missing which is causing the problem

    Now add site folder name in css url rule

    /BarbershopWebsite/images/3day-shave-course.jpg

    console view - I made quick dash in my local console to see what was causing it and this worked as suggested above. enter image description here it would work.

    UPDATE - Since I am not able to get to github with out creating unnecessary fork here is what you need to change in src/css/style.css file. Just copy paste below code.

    * {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: "Manrope", sans-serif;
}

html,
body {
  overflow-x: hidden;
}

/*scrollbar*/
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #999;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/*Navigatiemenu top*/
header {
  position: relative;
}

header nav {
  width: 100vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  z-index: 2;
  background-color: rgba(38, 60, 73, 0.9);
}

header ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 100px;
}

header ul li {
  list-style-type: none;
  padding: 0 50px;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  font-size: 16px;
}

header ul li a {
  text-decoration: none;
  color: white;
}

header ul li a:hover {
  color: chocolate;
}

header ul li #appointment {
  padding: 15px 30px;
  background-color: saddlebrown;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

header ul li #appointment:hover {
  background-color: chocolate;
  color: black;
}

header #logo {
  font-size: 50px;
  text-decoration: none;
  padding: 0px 20px;
  margin: 5px;
  border: 2px solid white;
  color: white;
  background-color: #263c49;
  font-family: "Economica", sans-serif;
}

/*intro*/
.intro {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url(../../images/3day-shave-course.jpg);
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../../images/3day-shave-course.jpg);
  background-size: cover;
  height: 800px;
  text-align: center;
  color: white;
  text-shadow: 2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, 1px 1px black, -1px -1px 0 black,
 1px -1px 0 black, -1px 1px 0 black;
  letter-spacing: 4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.intro .company-name {
  padding: 0 20px;
  margin: auto;
  border: 5px solid #fff;
  -webkit-animation: fade-names 1s linear forwards;
          animation: fade-names 1s linear forwards;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.intro h1 {
  font-size: 150px;
}

.intro h2 {
  margin-top: -20px;
  padding-bottom: 20px;
  font-size: 50px;
}

.intro h1,
.intro h2 {
  font-family: "Economica", sans-serif;
  font-weight: 100;
}

@-webkit-keyframes fade-names {
  from {
    opacity: 0;
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes fade-names {
  from {
    opacity: 0;
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

/*markup content*/
.content {
  margin: 0 300px;
}

.content > div {
  padding: 80px 0 10px 0;
}

.content > div > p {
  margin-bottom: 20px;
}

.content h2 {
  color: #444;
  position: relative;
  margin-bottom: 20px;
}

.content h2::after {
  content: "";
  width: 70px;
  position: absolute;
  left: 0;
  bottom: -2px;
  border-bottom: #aaa8a8 solid 2px;
}

/*make appointment*/
.make-appointment .shops {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.make-appointment .shops .shop-text {
  margin: 5px 0;
}

.make-appointment .shops .emmen-container,
.make-appointment .shops .zwolle-container {
  width: 450px;
}

.make-appointment .shops .store-hours {
  padding-top: 10px;
}

.make-appointment .shops .hours {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.make-appointment .shops .emmen-btn::after {
  background-image: url(../../images/emmen-front.jpg);
}

.make-appointment .shops .zwolle-btn:after {
  background-image: url(../../images/Stellar-Bakkes-13.jpg);
}

.make-appointment .shops .emmen-btn,
.make-appointment .shops .zwolle-btn {
  height: 310px;
  background: #000;
  position: relative;
}

.make-appointment .shops .emmen-btn h3,
.make-appointment .shops .zwolle-btn h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1;
  color: #fff;
  padding: 10px 20px;
  background-color: chocolate;
  font-weight: 200;
}

.make-appointment .shops .emmen-btn h3:hover,
.make-appointment .shops .zwolle-btn h3:hover {
  text-decoration: underline;
}

.make-appointment .shops .emmen-btn::after,
.make-appointment .shops .zwolle-btn::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.9;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.make-appointment .shops .emmen-btn:hover h3,
.make-appointment .shops .zwolle-btn:hover h3 {
  color: #fff;
  background-color: saddlebrown;
}

.make-appointment .shops .emmen-btn:hover::after,
.make-appointment .shops .zwolle-btn:hover::after {
  opacity: 0.2;
}

/*about*/
.img-container {
  display: -ms-grid;
  display: grid;
  width: 100%;
  height: 450px;
  gap: 40px;
  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-rows: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      grid-template-areas: "salon salon materials"
 "salon salon blowdry";
}

.img-container div {
  background-size: cover;
}

#salon {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: salon;
  background-image: url(../../images/emmen-salon.jpg);
}

#materials {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: materials;
  background-image: url(../../images/materials-bakkes.jpg);
}

#blowdry {
  -ms-grid-row: 2;
  -ms-grid-column: 3;
  grid-area: blowdry;
  background-image: url(../../images/andre-emmen.jpg);
}

.text-container p:first-of-type {
  margin-bottom: 10px;
}
/*# sourceMappingURL=style.css.map */
    PROBLEM : Relative URL your images folder is at https://mfagaikema.github.io/images while your css file is at

    https://mfagaikema.github.io/BarbershopWebsite/src/css

    CSS while interpreting URL is making staring slash to compute from root of the domain i.e. /images/whatever.jpg becomes https://mfagaikema.github.io/images/whatever.jpg

    Partial URLs are interpreted relative to the source of the style sheet, not relative to the document.

    so I have changed relative path of url starting from where css file is located i.e. https://mfagaikema.github.io/BarbershopWebsite/src/css

    so we need to go two levels up from the location of the css file then from there go to images folder setp by step illustration

    ../images/3day-shave-course.jpg makes computed url to be https://mfagaikema.github.io/BarbershopWebsite/src/images/3day-shave-course.jpg

    ../../images/3day-shave-course.jpg makes computed url to be https://mfagaikema.github.io/BarbershopWebsite/images/3day-shave-course.jpg

    I have made the changes in css just replace it in your style.css file in src folder. background-image: url(../../images/Stellar-Bakkes-13.jpg); It will work.