Will Cooley
KPCKevin Powell - Community
•Created by Will Cooley on 2/17/2025 in #front-end
background-image file path using Sass
Hello,
I have a question about image file paths with the background-image CSS property using Sass.
Locally, this file path works:
However, in production (using GitHub pages), the path becomes:
//cooleywc.github.io/img/chicago-500-tall.webp
This results in a 404 because the correct path should include the root folder like this:
//cooleywc.github.io/benko_drums_4/img/chicago-500-tall.webp
When I try to use a relative path (to the root folder /benko_drums_4) like this:
it adds /dist in front of /img, which also results in a 404.
//cooleywc.github.io/benko_drums_4/dist/img/chicago-500-tall.webp
Currently, I'm using the full web path:
This works both locally and in production, but I assume it’s bad practice (and I have to toggle between the local files if I want to make changes). Also, I expect I may run into trouble when I eventually wire up the GitHub pages to a GoDaddy account.
Does anyone have any advice on managing the file paths so they work both locally and in production using background-image in Sass?
1 replies