Adding images when CSS gradients are used?

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>?

BTW, anything prefixed -webkit isn't technically CSS3 but rather an Apple "standard" that'll only work in Safari and Chrome. This shows the other methods to get a gradient in all browsers: http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/ — soutarm, Aug 24 '10 at 05:17
Yeah I know, I use -moz- ie filter, but this was just a quick copypasta for the example... — omnix, Aug 24 '10 at 05:19
Check out this question, possibly useful to you: http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients — Strelok, Aug 24 '10 at 05:52

score 4 · Accepted Answer · answered Aug 24 '10 at 05:17

4

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

answered Aug 24 '10 at 05:17

Scott Evernden

39,136
15
78
84

like then in css have the background with a png and button with the gradients? would that work? – omnix Aug 24 '10 at 05:22

score 1 · Answer 2 · answered Aug 24 '10 at 05:28

I think it'd be better and more compatible if you just put the gradient and button together in the same image, but if it's not practical in your situation, you can achieve the same effect using multiple divs:

<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>

Make sure you change the width/height parameters I set if you use mine.

score 1 · Answer 3 · answered Apr 22 '11 at 05:59

Hi to all :) I've been trying the png transparancy layering / css3 gradient technique for a while and accross the browsers this seems to be most reliable:

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

I hope this helps anyone even if just one person then i'll be smiley all day today :)

score 0 · Answer 4 · answered Aug 24 '10 at 05:12

You should use your first example, but reverse the lines so that the image is applied before the gradient. All browsers will get a background image, but only browsers that understand -webkit-gradient will use the gradient. All others will ignore it.

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

score 0 · Answer 5 · answered Aug 24 '10 at 05:16

You could flatten your icon onto a gradient background meaning you'd only need to set the background-image. Other than that, I think you're going to have to put an tag (or a container with the image as background) inside your gradient-ified container.

Adding images when CSS gradients are used?

5 Answers5

Linked