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
background-image: url(‘/img/chicago-500.webp’);


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
background-image: url('./img/chicago-500.webp'), 

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:
background-image: url('https://cooleywc.github.io/benko_drums_4/img/chicago-500.webp');


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?
Was this page helpful?