SvelteKit app background image. Background image works in local but not live
Public repo: GitHub - fourwhitesocks/solo-challenge

If you check my Netlify live link above there ‘should be’ a background image in the 4th grid item (.day:nth-child(4) that is missing on the live version; it does show correctly in my Local version.
It should be showing near the bottom of the 4th grid item; it’s a smallish svg. You can see it being called in the CSS, if you look in the Developer Tools. I noticed that is says immutable when I hover over it in the CSS, does that help at all?

As mentioned this is a SvelteKit app.

Here is my CSS call for it:

.day:nth-child(4) { grid-area: four; background-color: hsl(133, 6%, 27%); --tw-text-opacity: 1; color: hsl(var(--nc) / var(--tw-text-opacity)); background-image: url('./sailboat-hr-test-op.svg'); background-repeat: no-repeat; background-position: center 92%; }

What I have tried:
-I’ve tried to save and re-deploy the site; also choosing the clear cache and deploy option
-I’ve tried changing the file path, but then it does not work in Local either
-I tried removing the code, saving and re-inserting it again
-maybe for live I need to add ‘static’ to my css but I didn’t think I needed to do that
-was just thinking it might have something to do with the Adapter maybe?

  • will keep trying :slight_smile:

  • Just noticed that in the Deploy log I see this:

./sailboat-hr-test-op.svg referenced in /opt/build/repo/src/routes/posts/+page.svelte?svelte&type=style&lang.css didn’t resolve at build time, it will remain unchanged to be resolved at runtime Hummm not sure what that means!

Thank you to anyone looking!

The image is showing now…

Ok… so I was doing some other editing and the image appeared; so I guess this solved itself.

Be awesome if someone might still chime in to explain it tho lol!

At least according to this deploy: Netlify App which points to:, the image was simply missing in that deploy, thus a 404.