simple css color overlay for background images

First, a full-width hero image has a color overlay added on top to create a different hue. There are a few things going on with this example. See the Pen Zoom and Blur background Image by Zach Richard Fade-in Hero Image with Overlay by Rand Seay A little bit of jQuery changes the background-size property upon scroll to create the effect. This technique could be quite useful when you really want visitors to focus on the background image (like the header of a news article) and then allow for the easy reading of text on top. See the Pen Animated Background Gradient by Mario Klingemann Blur on Scroll by Zach Richard Using JavaScript, you can define gradient colors to match your palette. This animated gradient example is nice because it’s a more subtle effect. If not done carefully, an animated background can distract from any content sitting on top of it. See the Pen Fullscreen CSS Background Image Slideshow by Kevin Lesht Animated Gradient by Mario Klingemann It makes for a much more lightweight slider than traditional JavaScript. Using a fairly simple bit of CSS, this background allows for a smooth transition between multiple images. See the Pen skew bg by Marcel Moving Pictures by Kevin Lesht This pure HTML/CSS solution makes it a cinch. It’s an effect that was incredibly easy to implement in print design and a pain to do on the web – until now. Skewed backgrounds are one of the hottest trends in web design. See the Pen GSAP Animate CSS background-position by Jonathan Marzullo Skewed by Marcel It’s done with the help of CSS transform and some JS. Reminiscent of side-scroll video games of the past, this technique features two distinct images – each scrolling in the opposite direction. See the Pen CSS background change on scroll by Giana Scrolling Animation by Jonathan Marzullo The use of CSS mix-blend-mode property allows for the change in hue, which is dependent upon the contents of the background. This background effect is so cool that the fixed element on top appears to change color as the user scrolls. Fade-in Hero Image with Overlay by Rand Seay.Scrolling Animation by Jonathan Marzullo.Gradients are technically background-images and thus not subject to the rule where they can’t come first (be top) in the stacking order.

Instead of using a transparent flood color using rgba() or hsla(), we can use a gradient. 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. 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. I suspect the real reason that was decided is because it would be too easy for authors to screw up. 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). A while back when I whined on Twitter about it I got a variety of ideas/reasons/excuses.

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.

Simple css color overlay for background images