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: [&quot;./src/*/.tsx&quot;], darkMode: false, // or &#39;media&#...
19 Replies
cornflour
cornflour2y ago
are you using next.js? if so, the place to put the image might be /public/your/image.svg instead of inside /src
Perchant
Perchant2y ago
I tried that, didnt wokr Might be nextjs the problem?
cornflour
cornflour2y ago
hmm let me test and get back to you
barry
barry2y ago
I just did and it works fine
cornflour
cornflour2y ago
it works for me too
barry
barry2y ago
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
backgroundImage: {
hero: "url('/photo.avif')",
},
},
},
plugins: [],
};
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
backgroundImage: {
hero: "url('/photo.avif')",
},
},
},
plugins: [],
};
className="bg-hero" works. I have photo.avif inside public
cornflour
cornflour2y ago
barry
barry2y ago
@Perchant
Perchant
Perchant2y ago
ohh my....
Perchant
Perchant2y ago
Works!!!! Thank you guys
barry
barry2y ago
wtf did you do before lol
cornflour
cornflour2y ago
what did you change lmao
Perchant
Perchant2y ago
I put . in front of the /
barry
barry2y ago
theowat
Perchant
Perchant2y ago
yep... That si why we all love coding for those ; type of errors
cornflour
cornflour2y ago
that 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 lol
barry
barry2y ago
no, thats what he did wrong 🤦‍♂️
cornflour
cornflour2y ago
ooooooooooohhhh yeaa zero reading comprehension skill from me there lmao mb
Want results from more Discord servers?
Add your server