How to make an svg image as a background image with react and Tailwind css?

Question

i am implementing a reponsive website with react and tailwind , i have an SVG image which i want to make it as a background image for a main tag but it doesn't work . I followed the tailwind docs and added this code to my taliwind.config.js

 theme: {
   extend: {
      backgroundImage: {
                         'hero-pattern': "url('/public/background.svg)"
                        }
            }
         }

and using bg-hero-pattern does not display anything . I tried another option which is the style attribute in my tag it displays the image but it does not cover all the parent tag although i am using bg-cover and bg-no-repeat this is my code :

<main className="w-screen h-screen  ">
    <div className="h-screen w-screen bg-no-repeat bg-cover"                    
         style={{ backgroundImage: `url(${background})` }}>
      {/* Content */}
      
      <div className="px-4 py-6 sm:px-0">
        <div className="border-4 border-dashed border-gray-200 rounded-lg h-96"> 
     </div>
      </div>
      {/* <!-- /End content --> */}
    </div>
  </main>

can anyone help me please ?

Answer 1

If you've defined it in the tailwind.config.js file like you mentioned as

theme: {
   extend: {
      backgroundImage:
         {
           'hero_pattern': "url('/public/background.svg)"
         }
     }
 }

The you can simple use it as

<div class="bg-hero_pattern">
   ...
   ...
</div>

I have changed name from hero-pattern to hero_pattern