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.
You can add your own background images by editing the theme.backgroundImage section of your tailwind.config.js file: These don’t just have to be gradients — they can be any background images you need. Learn more about customizing the default theme in the theme customization documentation.
CSS background-image Property with linear-gradient Value To display a linear gradient of colors as background, set CSS background-image property with linear-gradient() value. The syntax of linear-gradient() function is where Parameter Description direction Optional.
To work with Tailwind CSS, we have to add Tailwind CSS pre-compiled file to our project folder. Step 3: Now we have to add Tailwind to our CSS by using the @tailwind directive to inject Tailwind’s base, components, and utility styles into our CSS file.
To give an element a linear gradient background, use one of the bg-gradient- {direction} utilities, in combination with the gradient color stop utilities. To control the background image of an element at a specific breakpoint, add a {screen}: prefix to any existing background image utility.
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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With