Background image issue with local images when i use bg in div

Question

I have a issue in tailwind css when i use bg-"[url('.assets/images.png')]" these is not working when i put online image address the image is coming what could be the issue with local images as i frustrated doing and doing but not geeting any solution

A explaination would be helpful and correct syntax would be helpful

Answer 1

In your code there is typo, url is outside the []

Change

bg-url['(<imagepath)']

to

bg-[url('<imagepath>')]

---

Extra: Procedure:

When using asset image make sure you add your own background images by editing the theme.backgroundImage section of your tailwind.config.js file:

tailwind.config.cs

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'images': "url('.assets/images.png')", 👈 add your image here
        
      }
    }
  }
}

Then use it as

<div class="bg-[url('/img/hero-pattern.svg')]">
  <!-- ... -->
</div>

Refer: https://tailwindcss.com/docs/background-image