2

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 ?

Ghost
  • 318
  • 2
  • 8

3 Answers3

3

The simplest and best solution could be using an arbitrary value. You can do something like this

<div className="bg-[url('../images/background-image.svg')]">

You can find more details about arbitrary values over here and you require tailwind version 3+ to use it.

Simran Singh
  • 2,323
  • 12
  • 21
1

I tend to avoid using background images these days and use grid instead. Just layer the grid cells one on top of the other.

https://play.tailwindcss.com/gOFytBrc4G

<div class="grid h-64 bg-gray-400 p-5">
  <img src="/img/logo.svg" class="col-start-1 row-start-1 self-center opacity-25" alt="Tailwind Play" />
  <div class="col-start-1 row-start-1">
    <h1 class="text-2xl font-bold">This is my heading</h1>
  </div>
</div>

You can wrap the img in a div if that gives you more control.

It should give the same end result, and I find you have more control this way anyway.

stickyuser
  • 2,552
  • 15
  • 15
  • The problem that the image never fit or cover the parent div even with bg-cover – Ghost May 18 '22 at 09:57
  • What is happening instead? Are you able to share the svg image? If the svg has width and height inside the code then it will be a fixed size, like this https://play.tailwindcss.com/NSy0RGFr3v. But in the original example it has no width and height so essentially it is acting like `object-contain` and filling the space – stickyuser May 18 '22 at 14:41
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

MagnusEffect
  • 3,363
  • 1
  • 16
  • 41