Reputation:
I am new to website building and recently found out how to use Github Pages to build my own website on a domain I bought from Google Domains.
I have the photo I want to display in the hero section in the photos folder, titled hero.jpg
. However, once I commit to GitHub, the photo doesn't show up.
I noticed that I cannot access hero.jpg
at my-site.com/photos/hero.jpg so maybe this is the problem.
Could someone please advise me on the proper way to specify the path to images in HTML using the url
function? Right now, I'm trying background: url("assets/photos/hero.jpg")
Thanks so much in advance!
Upvotes: 2
Views: 2904
Reputation: 238
Though i cannot find the said repository as the link is broken, i got similar issue of displaying background image.
This is my project tree structure
-- assets
-- images
-- image.jpg
-- js
-- css
-- styles.css
index.html
My background image didn't display when i did this
background: url("assets/images/image.jpg")
My background image displayed when i did this instead
background: url("../images/image.jpg")
This has worked for me, i hope it works for you.
Upvotes: 1
Reputation: 381
On everything except OSX and Windows paths are case sensitive. Change the .jpg in your CSS to .JPG or rename the file in your git repo.
Upvotes: 0