Background image gradient overlay

background-image-gradient-overlay.markdown

Background image gradient overlay

Using the :after element to add a gradient overlay to a background image. Blog post: https://alexcarpenter.me/posts/2018/08/background-image-gradient-overlay/

A Pen by Alex Carpenter on CodePen.

License.

index.html

<div class="bg-img"></div>

style.scss

html, body {
  width: 100%;
  height: 100%;
}

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