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.
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: