Background image gradient overlay

HTML:

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

CSS:

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,#002f4b,#dc4225);
		opacity: .6; 
  }
}

DEMO