How to provide path/URL for background image in Tailwind?

Question

I use Tailwind in my React projects. I want to add a background image in a div but it's showing the following error:

Module not found: Error: Can't resolve '../../icons/blog-hero-1.png' in 'C:UsersDELLfrontend-developmentaidhumanity-practice-2src'

I am adding tailwind class

bg-[url('../../icons/blog-hero-1.png')]

is used to add a background image, the url is relative to the current file, and also works when adding a normal image via:

import Hero from "../../icons/blog-hero-1.png"
<div>
  <img src={Hero} className="h-full rounded-3xl"></img>
</div>

Can anyone guide how to give the correct URL? NOTE: I have also added a codesandbox example here for better demonstration, in which I try to import the background image in "Homepage.js" but it doesn't work. https://codesandbox.io/s/background-image-wl9104?file=/src/components/Homepage.js

Answer 1

You can also use the following methods to achieve the same results:

In your tailwind.config.js file:

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'hero': "url('../../icons/blog-hero-1.png')"
      }
    },
  },
  plugins: [],
}

You just need to mention bg-hero in the class to achieve it.