Applying gradient over background cover image

Question

I have the following fiddle with background image which I am using as cover (trying to find the best fit without distorting the image).

Right now I want to add gradient on top of this image and also I see a similar questions like this I can not make it work ( gradient does not show up ).

Is there a way to have:

background-size: cover;
background-position: center;
background-image: url(pathToImg);

together with gradient?

http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients — Nik Terentyev, Jun 24 '14 at 00:45
@NikTerentyev have you read the question? I already showed that I looked into this question and tried to apply it's solution. I also showed that result does not work for me. So I can not understand what you link suppose to mean. — Salvador Dali, Jun 24 '14 at 00:47
you have to place the gradient background (specified by `linear-gradient`) ***before*** the image background (specified by `url`), http://jsfiddle.net/viphalongpro/2gses/4/ However the gradient background cover the image, there is not any partial transparency here because you don't use transparent colors for the color stops. — King King, Jun 24 '14 at 00:58
have you read my comment ***carefully***? I said that your colors are solid color (colors which don't have alpha channel). — King King, Jun 24 '14 at 01:01
Background colours, and therefore gradients, are placed beneath background images, so you won't see the gradient as you have constructed your fiddle. You could try applying the gradient to your element's ::after pseudo element. I'm on my phone right now, but I'll check in tomorrow if some intrepid SO'er hasn't already answered. — Mister Epic, Jun 24 '14 at 01:02
@KingKing Most probably you edited you comment after I read it and replied. Right now I reread it. Thanks. — Salvador Dali, Jun 24 '14 at 01:03
@ChrisHardie the problem is that he does not know how to place the gradient on top (he of course knows that the gradient is under the image in his demo), it's the problem of understanding the syntax of specifying multiple-backgrounds (the first specified will be laid on top of the following ones specified). — King King, Jun 24 '14 at 01:06
thank you @ChrisHardie and KingKing. Because of your comments I found a way to do what I wanted. I will add the answer in few seconds. — Salvador Dali, Jun 24 '14 at 01:10
continue to king king something like this http://jsfiddle.net/2gses/5/ — marathonman, Jun 24 '14 at 01:12

Salvador Dali · Answer 1 · 2014-06-25T20:19:55.327

Thank you KingKing and Chris Hardie. Thanks to your comments I understood what I was doing wrong and how to fix it.

So the first problem is that my url-image was on top of my gradient, thus hiding it (thanks kingKing). The second problem is that I need gradient to be transparent (thanks Chris).

So here is a solution.

If somebody will give me a better answer, I would be happy to accept it.

background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)), url(imga.jpg);

Applying gradient over background cover image

1 Answers1