Your code is here, please review and make the necessary adjustments:
<link rel="stylesheet" href="src/css/style.css">
transforms into https://mfagaikema.github.io**/BarbershopWebsite/**src/css/style.css
Now, the revised CSS code looks like this:
linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/images/3day-shave-course.jpg)
transforms into
The issue lies in the absence of /BarbershopWebsite/, causing the problem.
To rectify this, add the site folder name to the CSS URL rule:
/BarbershopWebsite/images/3day-shave-course.jpg
Upon inspecting the console, I quickly deduced the root of the issue and confirmed that applying the suggestions above resolved it.
This action should resolve the problem.
UPDATE - Due to restrictions accessing Github without unnecessary forking, modify the following content in the src/css/style.css file. Simply copy and paste the code below:
* {
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;
}
...
... (omitted for brevity) ...
...
/*markup content*/
.content {
margin: 0 300px;
}
.content > div {
padding: 80px 0 10px 0;
}
...
/*# sourceMappingURL=style.css.map */
ISSUE: Relative URL
Your image folder is located at:
while your CSS file can be found at
When interpreting URLs, the CSS assumes a base from the source of the stylesheet, not the document itself.
To address this, the relative path of the URL must start from where the CSS file is situated, which is why it needs to go two levels up from the CSS file location before navigating to the images folder.
Illustrated step by step:
../images/3day-shave-course.jpg results in the computed URL:
../../images/3day-shave-course.jpg leads to the computed URL:
I have adjusted the CSS accordingly, simply replace it in your style.css file within the src folder.
background-image: url(../../images/Stellar-Bakkes-13.jpg);
Following these instructions should resolve the issue.