CSS fade background image to

Question

Is it possible to fade the bottom of a background image to transparent? Would I specify background-image and linear-gradient to achieve this?

Thanks!

http://stackoverflow.com/q/15489165/3597276 – Michael Benjamin Sep 21 '15 at 02:28 — Michael Benjamin, Sep 21 '15 at 02:28
http://stackoverflow.com/q/15814346/3597276 – Michael Benjamin Sep 21 '15 at 02:29 — Michael Benjamin, Sep 21 '15 at 02:29

score 0 · Answer 1 · answered Sep 21 '15 at 02:37

Not exactly in the way you describe, but you can consider some possibilities to reach the same effect:

Edit the image so that the transparency gradient is part of the image. If the gradient will always be the same and we are talking about a single image, you should do this
Instead of fading the image over the background, put the 'background' color over the image and set a linear gradient on that (in another div or 2nd background in the same container)
You can check out fading css clipping masks, see the Harry Potter example at https://css-tricks.com/clipping-masking-css/ but I am not sure about browser support.
It is also possible to create the fading clipping mask inside an SVG (so the SVG contains a link to the image file and has a clipping mask) I would guess this is more widely supported than the above option

1 Answers1