Web Development Archive

You are here: Home / CSS / Transparent Gradient with Background Image

Transparent Gradient with Background Image

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; 
 }