background images not showing up when using astro responsive images

[bold flame]

I was using some images with the Image component (I've also enabled responsive images in config), but then when I use those same images as backgrounds (in external css file) in another page, they dont get loaded. Only the ones with Image component show up.
This issue doesn't happen locally but only when hosted. I tried vercel and sevalla and also tried clearing cache.

I noticed even the image urls differ:
With Image component, the default src: /_astro/walls-ceilings-img.DSxTo-jP_ZBPOhg.webp
As a css bg url: /_astro/walls-ceilings-img.DSxTo-jP.webp

https://ariva-pm-9u153.sevalla.page/construction-services this is where the images work properly since I am using Image component

then in https://ariva-pm-9u153.sevalla.page/ if you scroll down to see the construction services section, you will see all cards don't have the background images which are actually pointing to the same assets that I used in the /construction-services page

[bold flame]

https://stackblitz.com/edit/github-gdzxpr2x?file=src%2Fstyles%2Findex.css

here's the minimal production of the issue. this is what my code looks like and I also modified the astro config file, but I couldnt actually test it since for whatever reason the terminal is not appearing.

to see the issue, you have to first run npm run build and then npm run preview
simply running npm run dev won't reproduce the issue

[jagged cape]

Thanks for the repro! (the CSS wasn't imported though if anyone else look at this)
Looks like a bug to me! I think this could be the same issue as https://github.com/withastro/astro/issues/14500

[bold flame]

oh no yea i forgot to import the css
I couldn't test it cuz I couldn't open the terminal as I said lol but thanks for taking a look

[jagged cape]

Yeah it's weird, first time I couldn't get the terminal in Stackblitz... 👀

[bold flame]

so I should just duplicate the images with a different file name?
for me since the images are in different pages it won't affect page load, but if someone tried to do this within the same page it would be problematic

[bold flame]

ikr I saw it first when I opened the astro repro template but then it somehow disappeared lmao

[jagged cape]

In the meantime, yes I think the best option is too duplicate the image with a different name unfortunately. Not ideal.
I tried a few Vite assets parameters (https://vite.dev/guide/assets.html#explicit-url-imports), except adding ?inline in the CSS file nothing was working. But obviously, inlining a big image is not ideal neither.

[bold flame]

could someone download the stackblitz and run the preview of the build to see if the issue is correctly reproduced?
@jagged cape in the github issue u posted the dude couldn't reproduce the bug and it seemed like it was related to the specific image they used

[bold flame]

yea yea

[jagged cape]

could someone download the stackblitz and run the preview of the build to see if the issue is correctly reproduced?
Yeah I've done that, and I can reproduce.

in the github issue u posted the dude couldn't reproduce the bug
In Stackblitz they said, I don't know why. But I recall I tried and could reproduce this. And so, it looks like the same bug for me.

But yeah, feel free to post your reproduction in that issue, having different test cases can help while fixing the issue!