title: Tailwind CSS: how to apply background image with linear gradient?
body: <p>I want to apply a linear gradient to my background image. on tailwind config file I wrote a custom rule like this:</p>
  <pre><code> theme: {
      extend: {
        backgroundImage: (theme) =&gt; ({
          'hero-pattern': &quot;url('../src/images/icon-bg.jpg')&quot;,
    
        }),
      },
    },
  </code></pre>
  <p>It works. but when I try to apply a linear gradient it didn't woork.</p>
  <p>For applying linear-gradient, what I have tried is this:</p>
  <pre><code> theme: {
      extend: {
        backgroundImage: (theme) =&gt; ({
          
           'hero-pattern':
            &quot;linear-gradient(to right bottom, rgba('#7ed56f',0.8), rgba('#28b485',0.8)), url('../src/images/icon-bg.jpg')&quot;,
        }),
      },
    },
  </code></pre>
  <p>But it didn't work.</p>