-1

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);
Anil Kumar
  • 65
  • 1
  • 8
  • 1
    Does this answer your question? [How do I combine a background-image and CSS3 gradient on the same element?](https://stackoverflow.com/questions/2504071/how-do-i-combine-a-background-image-and-css3-gradient-on-the-same-element) – Awais Dec 30 '19 at 07:32

1 Answers1

0

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.

Siona Fernandes
  • 375
  • 2
  • 21