Level 102
How are you adding the images? Also be sure to add it to your javascript if you are using blade
https://laravel.com/docs/10.x/vite#blade-processing-static-assets
Feb 17, 2023
12
Level 9
Using background images in Tailwind, Vite, Laravel Environment.
Hi everyone. Tailwind CSS, Laravel, Vite Question.
I want to use background images in tailwind CSS. So what I'm supposed to do is define this in my tailwind config and I've done that correctly.
The issue is that when working locally (running vite) the url I've specified for my image is going to resolve to the port that vite is using(5173) - Something that will look like this http://127.0.0.1:5173/images/landing.jpg.
Obviously that's going to result to a 404.
When I build everything is okay and my image is displayed correctly.
But I can't keep on building every time I make small CSS changes. Would appreciate any help I can get on this.
Level 9
@Sinnbeck My images are in the public folder.
backgroundImage: {
'landing': "url('/images/landing.jpg')",
}
I then add the above code to my tailwind config extend object.
1 like
Level 102
@muindetuva Hm weird that vite tries to handle that as its prefixed by a /
The docs clearly states that it shouldnt be the case. https://laravel.com/docs/10.x/vite#url-processing Weird. Let me test some stuff and come back
Level 4
@sinnbeck Sorry to jump in on perhaps an old thread but did you manage to find anything out about this? Am experiencing the same issue. npm run build works fine but npm run dev tags the port 5173 onto assets served through css such as a background image as @muindetuva stated above.
1 like
Level 4
Quick and dirty hack if useful for anyone...
I happen to be using an nginx reverse proxy to handle a few sites. Quick trick is to proxy pass traffic from port 5173 to 80 for requests to /storage:
server {
listen 80;
listen 5173;
location /storage {
proxy_pass $url:80;
}
}
Not ideal but at least I can work with npm run dev for now.
2 likes
Level 1
I stumbled across this in my quest to add a background image. It appears you can use a path relative to the ./js directory. The below works for my using both npm run dev and npm run build
backgroundImage: {
'diagonal-lines': "url('../assets/images/diagonal-bg.jpg')",
},
2 likes
Level 7
Same problem here in dev,
Solved by placing images in /resources/images and then using
bg-[url('../images/image_name.jpg')]"
Also seems to be fine on a rpm run build but I am not 100% sure on this, comments welcome.
oh and hello again, it's been a while but I have a nice project on so here I am (again)!
Hope everyone is well :)
2 likes
Level 5
Hi, create for ex: assets folder inside resources then in tailwind config
extend: {
backgroundImage: {
'break-pattern': "url('../assets/break-pattern.jpg')",
}
},
Level 7
apply background via style attribute:
<div style="background-image: url({{ asset('asset/url.jpeg') }})"></div>
Level 15
In Laravel 11 with Vite. If your directory structure is resources->images->name-of-file.png then you can do this in the tailwind.config.js file.
extend: {
backgroundImage: {
'my-background': "url('../images/custom-bg.png')",
},
}
Something like this in your .blade.php file
<div class="relative bg-cover bg-center bg-my-background"></div>
In your terminal
npm run build
If you prefer to use a one-off arbitrary value in tailwind bg-[]
Example:
<div class="bg-[url('/resources/images/custom-bg.png')]"></div>
Lastly, you can set background with native CSS with Vite
Example:
<div style="background-image: url({{ Vite::asset('resources/images/custom-bg.png')}});"></div>
Comments welcome.
1 like
Level 1
You can fix this by adding a proxy configuration in the Vite serverconfiguration object.
server: {
# ...
proxy: {
'^/resources/css/storage/images': {
target: 'localhost'
changeOrigin: true,
rewrite: (path) => path.replace(/^\/resources\/css\/storage\/images/, '/storage/images'),
}
}
},
Level 4
If your image is inside public/images/, use: bg-[url('/images/landing.jpg')] Why? • Vite does not process files in public/, so they are always accessible at /images/landing.jpg, both in npm run dev and npm run build. • No need for extra configuration or workarounds. I think this might help. sorry if something is off. im new to forums and I just want to help other friends who are having difficulty.
Please or to participate in this conversation.