Gradients are technically background-images and thus not subject to the rule where they can’t come first (be top) in the stacking order. Specify the background-image and other background properties for the image. Instead of using a transparent flood color using rgba() or hsla(), we can use a gradient. Add CSS Set the width, height, and background-color for the overlay class. You can combine background color with brightness classes in TailwindCSS to. it can be done by assigning an image to the background-image. Adding overlay on a background is very useful to make the text visible on any image. Unfortunately we also can’t simply leave the color at the bottom and adjust the opacity of the image to allow some of that color to come through, because background-opacity isn’t a thing. The overlay effect can be achieved by using CSS background-image and CSS background properties. Forcing the color to be last makes the color kind of like a “fallback” rather than a layer like any other. background: green, url(image.jpg) would “fail” in a sense in that it would just flood the background green. After the interaction (clicking or hovering) occurs, the overlay gets removed and reveals the content beneath it. I suspect the real reason that was decided is because it would be too easy for authors to screw up. A typical overlay is semi-transparent, with a solid background color (usually black), and there’s some text or buttons on it for users to see or interact with.

It’s true you cannot comma-separate background-color, but I don’t think that’s relevant here as I’m comma separating the background shorthand not specifically background-color (not to mention ordering those values the other way around works fine). The problem with the background setting is, that both, the background image and. A while back when I whined on Twitter about it I got a variety of ideas/reasons/excuses. Please change the Apply to setting to overlay and it should work as expected. My first intuitive guess at doing this would be like this: /* Warning: this doesn't work */ But it’s not quite as obvious as you might suspect. If we layer a transparent color over an image, we can “tint” that image. You can also think of them as layered backgrounds since they have a stacking order. The background property in CSS can accept comma separated values.

Color overlay on background image css