Github 页面未加载 CSS 背景图像

Question

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?

Answer 1

Just use the relative URL as background-image: url("./assets/gradient-violet-bg.jpg") and it will work.

Answer 2

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');