Background image gradient overlay Nov 23

Here is a simple technique to overlay a gradient over a background image using a pseudo in CSS like the image above. Up until this point I would add an extra div within the background image and absolutely position it like this:

// HTML

<div class="hero-img">
	<div class="gradient-overlay">
</div>

// CSS

.hero-img {
	width: 100%;
	height: 100%;
	background: url('/img/hero.jpg') center center no-repeat;
	background-size: cover;
	position: relative;
}
.gradient-overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
	opacity: .6;	
}

Now we can get rid adding the extra div and use the :after pseudo element to achieve the same effect and keep your HTML clean. Now it will look something like this:

// HTML

<div class="hero-img">
	...
div>

// SCSS

.hero-img {
	width: 100%;
	height: 100%;
	background: url('/img/hero.jpg') center center no-repeat;
	background-size: cover;
	position: relative;
	&:after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
		opacity: .6;
	}
}

Now we have one less div in our HTML and do some fun things like animate in the background image and switch between colors easily. Check our my CodePen to see it in action.