gradient

.header-hero {
     background-image: linear-gradient(0deg, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.85) 100%), url();
 }

Gradient 1

.gradient-1 { 
     background: linear-gradient(steelblue, transparent 90%), url('https://flames.hu/wp-content/uploads/2013/09/desk.jpg') no-repeat center; 
     background-size: cover; height: 500px; 
 }

Gradient 2

.gradient-2 { 
     background: linear-gradient(steelblue, transparent 90%), linear-gradient(0deg, white, transparent ), url('https://flames.hu/wp-content/uploads/2013/09/desk.jpg') no-repeat center; 
     background-size: cover; 
     height: 500px; 
 }

CSS

header {
     text-align: center;
     background: linear-gradient(90deg, #d4eece, #55b3d0, #1e7eb7), url('../images/header-bg.jpg') no-repeat;
     background-blend-mode: multiply;
     background-size: cover;
 }

CSS

.cover {
     background: url('');
     background-blend-mode: multiply;
     background-size: cover;
     background-position: center;
 }
 .transparent-filter {
     background-color: rgba(0,105,142,.8);
 }