Kevin LeClair

Darken CSS Background Images with Ease

So we’ve all been there. You need to make a CSS background image darker, but you don’t want to do it in Photoshop. I previously achieved this technique through some pseudo elements in CSS, but that required fiddling with z-indexes and positioning. It results in some long and ugly markup. There must be a better way!

Enter linear gradients.

.yourDiv {
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../media/images/header-teachers-web.jpg') no-repeat center center;
}

Before your url in your background markup just specify a linear gradient with two of the same values. Use a black RGBA value with less alpha to get the see-through effect. So much easier than messing around with after and before elements!

Check it out on CodePen:

See the Pen rVadVW by Kevin LeClair (@kevinleclair1) on CodePen.

Posted on April, 27 2015 in CSS, General

Leave a Reply

Your email address will not be published. Required fields are marked *