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&#...

GitHub

setting arbitary value for background gives module not found error ...

Please read the problem here https://stackoverflow.com/questions/72949611/react-giving-error-on-tailwind-class-bg-url-images-bg-header-mobile-svg?noredirect=1#comment128891967_72949611

19 Replies

cornflour•16mo 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•16mo ago

I tried that, didnt wokr Might be nextjs the problem?

cornflour•16mo ago

hmm let me test and get back to you

barry•16mo ago

I just did and it works fine

cornflour•16mo ago

it works for me too

barry•16mo 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•16mo ago

barry•16mo ago

@Perchant

Perchant•16mo ago

ohh my....

Perchant•16mo ago

https://femboys-arent.gay/‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌

Perchant•16mo ago

Works!!!! Thank you guys

barry•16mo ago

wtf did you do before lol

cornflour•16mo ago

what did you change lmao

Perchant•16mo ago

I put . in front of the /

barry•16mo ago

Perchant•16mo ago

yep... That si why we all love coding for those ; type of errors

cornflour•16mo 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•16mo ago

no, thats what he did wrong 🤦‍♂️

cornflour•16mo ago

ooooooooooohhhh yeaa zero reading comprehension skill from me there lmao mb

Gaming

Programming

Add custom background from file with tailwind