CSS3 Gradients with background images?? Possible?

Question

Possible Duplicate:
Is it possible to combine a background image and CSS3 gradients?

I'm using CSS for a background gradient:

 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #95d7d3), color-stop(1, #7db1ad) );
 background:-moz-linear-gradient( center top, #95d7d3 5%, #7db1ad 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#95d7d3', endColorstr='#7db1ad');

But I would also like to add a background image, is there a way of doing this with these gradients?

If I use this:

background: -moz-linear-gradient( center top, #95D7D3 5%, #7DB1AD 100% ) url(../img/icons.png) 0 -293px no-repeat!important;

The gradient over-rides the background image.

any ideas?

Answer to your question here: http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients#2547064 — João Louros, Sep 21 '11 at 18:49
The answer is **transparency**. The overlaying gradient needs to be defined with transparency using `rgba()` or `hsla()`. Here's how to combine SVG and CSS to [create backgrounds with textured gradients](https://stackoverflow.com/a/49108254). — Clint Pachl, Mar 05 '18 at 11:13

score -1 · Answer 1 · answered Sep 21 '11 at 19:34

-1

background: url(../img/icons.png), -moz-linear-gradient( center top, #95D7D3 5%, #7DB1AD 100% ) ;

answered Sep 21 '11 at 19:34

user813720

451
2
6
14

Now the image covers the gradient. – Clint Pachl Mar 05 '18 at 11:04

score -1 · Answer 2 · answered Sep 21 '11 at 19:54

-1

Will the below link be helpful:

http://css3.mikeplate.com/

answered Sep 21 '11 at 19:54

defau1t

10,593
2
35
47

CSS3 Gradients with background images?? Possible?

2 Answers2