Background images not showing on GitHub pages - css

Question

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?

Answer 1

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.
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.