Linear Gradients syntax not able to understand

Question

Can any one help how background image and Linear Gradients work. I am getting full color instead of image. Please explain how it is working.?

background-image:linear-gradient(rgba(255, 0, 0, 0), rgba(255,0,0,0)),
     url(../img/background-img.jpeg);

Answer 1

Html

<div class='box'></div>

Css

.box{
  width:500px;
  height:500px;  
  background: #eb01a5;/*fallback*/
  background-image:url("https://images.pexels.com/photos/3370704/pexels-photo-3370704.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"); /* fallback */  
  background-image:
linear-gradient(rgba(255, 0, 0, 0), rgba(217, 19, 93, 0.73)),
url('https://images.pexels.com/photos/3224164/pexels-photo-3224164.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');

}

In linear-gradients, the 1st value is from which color to start, and the 2nd value is the end color

eg : background-image: linear-gradient(red, yellow), url(image_url);

Since both your values are the same, it a solid color.

Note: Some browsers may not support background-image linear-gradient, hence it is always better to have fallback background color, as well as image.