Adding images using CSS gradients?

Question

I am trying to create a button using CSS gradients plus an icon that sits on top of the gradient. I tried two methods, and both were unsuccessful.

Firstly:

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

I should have known this didn't work! But I also heard about several CSS3 background images, so I tried it like this.

The second:

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

Still not working :(. Is there really a way? With the tag added <img>in <button>?

Answer 1

only webkit browsers allow a lot of background effects (CSS3) .. generally speaking, you can have an OR gradient and image, but you cannot have both (for now)

2 divs tho , PNG

Answer 2

, , , , , div:

<div style="width:256px; height:256px; background:-webkit-gradient(linear, 0% 0%, 0% 89%, from(#3171CA), to(#15396F));">
<div style="width:100%; height:100%; background:url('btn.png') "></div></div>

, /, , .

Answer 3

:) png /css3- - , :

• background: url (images/bkgd1.png) top center repeat-x, url (images/bkgd2.png) top right repeat-x, -moz-linear-gradient (, # F3F704 0%, #FFFFFF 100%);

• background: url (images/bkgd1.png) top center repeat-x, url (images/bkgd2.png) top right repeat-x, -webkit-gradient (, , , -stop (0%, # F3F704), color-stop (100%, # FFFFFF));

, , , :)

Answer 4

, , . , , -webkit-gradient, . .

.btn {
  background: url(…);
  background: -webkit-gradient(…);
}

Answer 5

You can smooth your icon against a gradient background, which means you only need to set the background image. Other than that, I think you'll have to put a tag (or a container with an image as a background) inside your gradient container.