Background image in my website not visible after deployment through GitHub-CodePudding

I've looked at some other resources regarding this problem, but for some reason, they don't seem to be working. I've checked things like the path directory for the image, and I think that it's correct. I even uploaded the png as well as jpg to resolve this, but it still didn't make any difference. Also, it seems to be working completely fine with my local server but just not with Github. Here's a link to my repo for the website on Github pages: https://github.com/AnushkaKhare786/Coffee-Shop-.git

CodePudding user response：

It is possible the your web files are not correctly placed on Github. Here is document that shows you steps on how to host on Github, which I believe you want to do

CodePudding user response：

I think you should try to separate your images in an Images folder. Also, try to separate the custom stylesheets inside a CSS folder then update the src in your index.html then again make a new repo on Github. I think my advice will help you.

In case this didn't work then my friend refer to this link and read all the instructions carefully - Github Pages Guide

CodePudding user response：

You just need to change the path of cshop3.jpg. To do so, replace the url('/cshop3.jpg'); at line 213 in your styles.css by url('./cshop3.jpg')

- url('/cshop3.jpg');
  url('./cshop3.jpg'); <- Add the "." before the slash, or remove the slash

Add the "." before the slash, or remove the slash to get to the good directory (You did /cshop3.jpg, that refer to the root of your site, so https://anushkakhare786.github.io/ and not https://anushkakhare786.github.io/Coffee-Shop-/

CodePudding user response：

change your style.css file config to.. change your image path to ('./cshop3.jpg')