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

user_5534469 0
Viewed 13160

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.

tailwind-in-js tailwind-css css
2 Answers

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

user_105452220

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

user_55344690
Related