Tailwind CSS: how to apply background image with linear gradient?

Question

I want to apply a linear gradient to my background image. on tailwind config file I wrote a custom rule like this:

 theme: {
    extend: {
      backgroundImage: (theme) => ({
        'hero-pattern': "url('../src/images/icon-bg.jpg')",
  
      }),
    },
  },

It works. but when I try to apply a linear gradient it didn't woork.

For applying linear-gradient, what I have tried is this:

 theme: {
    extend: {
      backgroundImage: (theme) => ({
        
         'hero-pattern':
          "linear-gradient(to right bottom, rgba('#7ed56f',0.8), rgba('#28b485',0.8)), url('../src/images/icon-bg.jpg')",
      }),
    },
  },

But it didn't work.

Answer 1

don't use function. just try as a utility

theme: {
    extend: {
      backgroundImage: {
         'hero-pattern': "linear-gradient(to right bottom, rgba('#7ed56f',0.8), rgba('#28b485',0.8)), url('../src/images/icon-bg.jpg')",
      },
    },
  },

here is a working example https://play.tailwindcss.com/uHp6pKIKEc

Answer 2

The problem is you give, hex color code within rgba that's why the color is not applied.

You have to give rgba color code instead of hex color code

note: hex color code inside rgba is only supported by scss