Add custom background from file with tailwind
I would like to add custom background to website via local file and I used this
<div class="bg-[url('/your/image.svg')]">
<!-- ... -->
</div>
Doesnt work
Then I tried add the image to /src/image or just /src and it didnt work
visited these 2 posts and nothing worked
https://github.com/tailwindlabs/tailwindcss/discussions/3113
https://github.com/tailwindlabs/tailwindcss/discussions/8877
Any suggestions?GitHub
I can't set a backgorund image in tailwind.config.js because of fai...
I wrote the following file using this as the reference about customizing backgroud image. module.exports = { purge: ["./src/*/.tsx"], darkMode: false, // or 'media&#...
19 Replies
are you using next.js? if so, the place to put the image might be
/public/your/image.svg
instead of inside /src
I tried that, didnt wokr
Might be nextjs the problem?
hmm let me test and get back to you
I just did and it works fine
it works for me too
className="bg-hero"
works.
I have photo.avif
inside public@Perchant
ohh my....
Works!!!!
Thank you guys
wtf did you do before lol
what did you change lmao
I put . in front of the /
yep...
That si why we all love coding
for those
;
type of errorsthat doesnt sound right, since i dont have "." in my class there...
but if it works it works i suppose
though i can make that error happen if i set my path as
./cup.png
on my end too
sounds like a weird thing to throw error on since css itself would just have no bg if the path doesnt exist, so i dont see why tailwind would need to throw an error instead of just treat it like a string :/
but at least you got it to work
i usually would probably have the background image be outside of className lolno, thats what he did wrong 🤦♂️
ooooooooooohhhh
yeaa zero reading comprehension skill from me there lmao
mb