TailwindCSS Background Image
Answered
Japanese common catfish posted this in #help-forum
Japanese common catfishOP
Is this the official solution for using background images in a NextJS project, or can you recommend something else?
https://larainfo.com/blogs/how-to-use-background-image-in-nextjs-with-tailwind-css
The way described in the TailwindCSS documentation, both the extension to the configuration file and passing the image path in the className does not work...
https://larainfo.com/blogs/how-to-use-background-image-in-nextjs-with-tailwind-css
The way described in the TailwindCSS documentation, both the extension to the configuration file and passing the image path in the className does not work...
Answered by not-milo.tsx
The path you put in your tailwind configuration needs to correspond to where the image will be stored once the app is deployed/running. All images and assets under
/public get placed at the root of your server/domain so your screenshot would need to be changed to// ...other config options...
backgroundImage: {
'hero': 'url("/hero-image.jpg")',
}
// ...more config options...9 Replies
@Japanese common catfish Is this the official solution for using background images in a NextJS project, or can you recommend something else?
https://larainfo.com/blogs/how-to-use-background-image-in-nextjs-with-tailwind-css
The way described in the TailwindCSS documentation, both the extension to the configuration file and passing the image path in the className does not work...
do not work? they do. What path were you putting.
Japanese common catfishOP
@DirtyCajunRice | AppDir I tried a relative path like ../public/image.png, which is replaced for a proper URL when rendered in the browser, but the images were not rendered.
Balinese
Do you mind sharing your how you tried accessing the image?
The easiest and more reliable way is to add it to your
https://tailwindcss.com/docs/background-image
tailwind.config.js file like described at the very end of this doc pagehttps://tailwindcss.com/docs/background-image
Japanese common catfishOP
Here are both ways I've tried without success.
It seems that when I tried to access the URL http://localhost:3000/public/hero_image.jpg directly, I get a
It seems that when I tried to access the URL http://localhost:3000/public/hero_image.jpg directly, I get a
@Japanese common catfish Here are both ways I've tried without success.
It seems that when I tried to access the URL http://localhost:3000/public/hero_image.jpg directly, I get a
The path you put in your tailwind configuration needs to correspond to where the image will be stored once the app is deployed/running. All images and assets under
/public get placed at the root of your server/domain so your screenshot would need to be changed to// ...other config options...
backgroundImage: {
'hero': 'url("/hero-image.jpg")',
}
// ...more config options...Answer
Japanese common catfishOP
You're welcome ahaha