The background photo's arent showing on website, after I imported my files to Github-CodePudding

Imported all the folders of my code for my website from VS Code to my repository in GitHub. It is a very simple website using HTML and CSS only, as I am still only a beginner. Two background photos aren't showing when I do the preview of my page from GitHub. Other photos I used in HTML show without any problem. I found similar questions and tried to do what people advised, but I can't find a mistake in the relative paths I used. They look correct to me, I have no idea what else I could change. Here is the link to my GitHub repository: https://github.com/Karito84/Tea-Cozy-Project

In the styles.css

.mission {
height: 43.75rem; /*700px*/
max-width: 75rem; /*1200px*/
background-image:url("../Images/img-mission-background.webp");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
flex-direction:column;
justify-content: center;
margin-top: 69px;

} The above background-image doesn't show when I preview the website, but in my in VS code on my computer it all works and my website has all the photos. When I open the Image folder on GitHub the images are there and display when I view them. I also tried changing my path to url(".Resources/Images/img-mission-background.webp")per another person's suggestion but it doesn't change anything.

CodePudding user response：

Your relative paths are wrong. It should be url("./Resources/Images/img-mission-background.webp").

CodePudding user response：

So I just finally figured out how to make my background images work. Instead of relative path I used absolute path and the background pictures are finally showing up!

background-image: url("https://raw.githubusercontent.com/Karito84/Tea-Cozy-Project/master/Resources/Images/img-mission-background.webp");

but if someone can tell me what the relative path to this picture is, I would be very thankful!