GitHub page https://chryspenalber.github.io/hercules/
repository: https://github.com/chryspenalber/hercules
The images i've insert through css are not displaying in the github page, but in localhost is. What am I doing wrong?
I saw some articles about it, including case sensitive, but nothing works. I made other projects that displayed, I don't understand what I did diffently on this one.
This is one example, but it happens to all images.
<div class="img-overlay"></div>
<div id="topo">
<a href="#">
<img src="assets/images/chevron-double-up-white.svg" alt="">
</a>
</div>
.img-overlay {
position: absolute;
top: -300px;
left: 0;
width: 100%;
height: 2400px;
background: linear-gradient(to bottom, transparent 70%, var(--bg-color) 100%), url(/assets/images/bg-hercules.jpg) no-repeat top center / cover;
opacity: 1;
z-index: -1;
}
The paths to the images have a subtle but very important difference:
One is a relative path, the other is absolute from the root of the site. And in GitHub pages you don't control the root of the site.
Use relative paths in your CSS as well. For example:
url(../images/bg-hercules.jpg)