Background image not working unless using the full, hardcoded url | NativePHP | Page 1

chrome adder Nov 19, 2025, 4:38 PM

#

Does anyone have best practices around using background images? I tried using tailwind's bg-[url()] property, but it only works if I hardcode an external URL. I can't even get it to work with css. For example, I'm setting background-image: url('/public/img/aerial.jpg'); and vite correctly adds it to manifest.json. When I inspect the element in the iPhone simulator is has background-image: url(/build/assets/aerial-Dmwjxc-y.jpg); but the image still gives a 404 even though the file exists.

sinful tundra Nov 25, 2025, 6:03 AM

#

Use the asset() helper

chrome adder Nov 25, 2025, 5:41 PM

#

tried that too. for some reason style="background-image: url({{ asset('img/aerial.webp') }});" ended up working but class="bg-[url({{ asset('img/aerial.webp') }})]" gave a 404.

#Background image not working unless using the full, hardcoded url