GitHub page is not showing background image, FF console shows couldn't load images

Question

I'm not understanding even though image files are present, why GH pages is not able to show them ?

This does work properly locally.

GH Repo

Code

background-image: url(/images/bg-pattern-top.svg),
url(/images/bg-pattern-bottom.svg);

Images folder

 ./images

FF Console Error

Answer 1

Got it working with below changes, but I'm not sure why was it working properly on local setup though ?

1. Change 1

   background-image: url("../images/bg-pattern-top.svg"), url("../images/bg-pattern-bottom.svg");

2. Change 2

   background-image: url("../images/bg-pattern-card.svg");

3. Change 3

   background-image: url("../images/bg-pattern-top.svg"), url("../images/bg-pattern-bottom.svg");

Is there VS Code plugin which will capture these kind of errors or shows good practices to be followed ?

Answer 2

I think you might missing some path.

1. Try console.log or etc your url() first is return your current link or not ?
2. After return same link with current page then add your image path. url(/images/profile.jpg)
3. Last check if images folder can be access on public. (* Dunno what to say but folder images can be access by type full url with image path. Like localhost/images/profile.jpg it will show image.)