Question

I am trying to create a button using CSS Gradients plus a icon that goes on top of the gradient. I tried 2 ways and both was a failure.

First:

.btn {
    background: -webkit-gradient(linear, 0% 0%, 0% 89%, from(#3171CA), to(#15396F));
    background: url(../images/btn.png);
}

I should of knew that wouldn’t of worked! But I also heard about CSS3 multiple background images, so I tried it that way.

Second:

.btn {
        background: -webkit-gradient(linear, 0% 0%, 0% 89%, from(#3171CA), to(#15396F)), url(../images/btn.png);
    }

Still didn’t work :(. Is there any way to actually do this? With adding a <img> tag in the <button>?

Answer 1

only webkit browsers allow multiple background effects (CSS3) .. generally speaking you can have a gradient OR and image but you can’t have both (yet)

you could overlay 2 divs tho and have the image for the topmost be transparent PNG or such