Search code examples
htmlcssgithub-pages

Github Pages Not Loading CSS Background Image


I am working on a project to copy a static website for practice. Here is the original.

My copy is hosted here on Github pages.

As you can see, the original has an abstract background image. When running my site on live-server, the background shows up with no issue. However, on Github the background does not show up, even though my directory structure did not change when I pushed it.

Here is the CSS that enables the background image, and works fine locally:

background-image: url('/copy-site/assets/gradient-violet-bg.jpg');

Does Github not permit this sort of linking? If so, what is the reason?


Solution

  • I can see that all the other images are correctly loaded in your site. I sudjest you to move the background image in the folder with the other images ( becouse now is not present) and put that url in the background-image property. So something like this

    background-image: url('assets/gradient-violet-bg.jpg');
    

    and should work. Another way wold be to call directly url of the image from the source website

    background-image: url('https://www.kastapp.co/images/gradient-violet-bg.jpg');