css background gradient with multiple images

Question

I want to create a button with a textured background, a gradient, and an icon that is aligned to the left. This is the code I have but the background gradient is not showing.

background:#B1D521;
background-image: url(../images/icon-heart.png), url(../images/bg-tile.png), linear-gradient(bottom, rgb(152,185,32) 42%, rgb(177,213,33) 71%);
background-image: url(../images/icon-heart.png), url(../images/bg-tile.png), -o-linear-gradient(bottom, rgb(152,185,32) 42%, rgb(177,213,33) 71%);
background-image: url(../images/icon-heart.png), url(../images/bg-tile.png), -moz-linear-gradient(bottom, rgb(152,185,32) 42%, rgb(177,213,33) 71%);
background-image: url(../images/icon-heart.png), url(../images/bg-tile.png), -webkit-linear-gradient(bottom, rgb(152,185,32) 42%, rgb(177,213,33) 71%);
background-image: url(../images/icon-heart.png), url(../images/bg-tile.png), -ms-linear-gradient(bottom, rgb(152,185,32) 42%, rgb(177,213,33) 71%);
background-repeat:no-repeat, repeat;
background-position:10% center;

steve · Accepted Answer · 2012-07-12 15:02:03Z

1

I came up with the answer eventually. It's a workaround but I added a span inside the button with the same width and height and set it to be transparent, then on hovering over the button I do a transition on the opacity of the button. this way I can fake the transition with multiple backgrounds and a gradient.

http://jsfiddle.net/gBDAy/

answered Jul 12, 2012 at 15:02

steve

431 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christoph Over a year ago

neat workaround for animating gradients, which is troublesome atm.

Collectives™ on Stack Overflow

css background gradient with multiple images

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related