CODEWITHSUNDEEP
cssbackground-image
steve
steve

Reputation: 43

css background gradient with multiple images

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;

Upvotes: 0

Views: 458

Answers (1)

steve
steve

Reputation: 43

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/

Upvotes: 1

Related Questions