A Pen by Ahmad Awais.

Background-image-gradient-overlay.markdown

Background image gradient overlay

Using the :after element to add a gradient overlay to a background image. Blog post: http://alexcarpenter.me/blog/2013/background-image-gradient-overlay

Forked from Alex Carpenter's Pen Background image gradient overlay.

A Pen by Ahmad Awais on CodePen.

License.

index.html

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

style.scss

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

.bg-img {
  width: 100%;
  height: 100%;
  background: url('https://dl.dropboxusercontent.com/u/5049340/office%402x.png') 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,#35ad68,#fff);
		opacity: .8; 
  }
}