Section Background Image And Linear Gradient Not Working

I am trying to add a background image with a linear gradient. If I add the image without the linear gradient, the image appears. As soon as I add the linear gradient, neither of th

Solution 1:

It is definitely :

.education {
  background: linear-gradient(rgba(141, 153, 174, 0.8), rgba(141, 153, 174, 0.5)), url("samuel-beckett-bridge.jpg") no-repeat fixed;
  background-size: cover;
}

live solution : https://jsfiddle.net/v47dk902/

Solution 2:

You have inserted an extra curly bracket in background css. Kindly replace your background css with the following

background: linear-gradient(rgba(141, 153, 174, 0.8), rgba(141, 153, 174, 0.5)), url("samuel-beckett-bridge.jpg") no-repeat fixed);

Thanks

Solution 3:

If you're working with transparent background images, you will need to switch the order so the gradient appears beneath the image. You will want to list the image, repeat, and positioning info first, followed by a comma, followed by the gradient info.

So, using the code used above as an example:

.education {
    background: url("samuel-beckett-bridge.jpg") no-repeat fixed, linear-gradient(rgba(141, 153, 174, 0.8), rgba(141, 153, 174, 0.5));
    background-size: cover;
}