Background-image with background-gradient

Question

I'm trying to add a logo to one button that is styled with gradient, but the background-image "delete" the background color...

Here is the fiddle: http://jsfiddle.net/FDXy5/ and below is the current tet .css.

.rounded-orange-button {
text-align: center;
color: #FFFFFF;
display: inline-block;
border-radius: 2px;
line-height: 27px;
width: 200px;
position: relative;
background: #FF9100;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#FF9100) to(#FA6800));
background: -webkit-linear-gradient(top, #FF9100, #FA6800);
background: -moz-linear-gradient(top, #FF9100, #FA6800);
background: -o-linear-gradient(top, #FF9100, #FA6800);
background: linear-gradient(to bottom, #FF9100, #FA6800);
-pie-background: linear-gradient(to bottom, #FF9100, #FA6800);
}

.logo-edit{
    background-image: url('http://www.w3schools.com/cssref/smiley.gif');
    background-repeat:no-repeat;
}

Thanks to help me :-)

possible duplicate of [Is it possible to combine a background image and CSS3 gradients?](http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients) — Hashem Qolami, Mar 19 '14 at 07:59

Mathias · Accepted Answer · 2014-03-19T08:29:01.387

7

The graident is actually a background image as well. Luckily you can, in modern browsers, have multiple background images.

Example:

background-image: url('http://www.w3schools.com/cssref/smiley.gif'), linear-gradient(to bottom, #FF9100, #FA6800);

And you also need to do the same for the vendor specific gradients.

jsFiddle

See this link for compatibility table: background-image MDN

edited Mar 19 '14 at 08:29

answered Mar 19 '14 at 07:55

Mathias

5,642
2
31
46

@Mathias: thanks a lot. I've a question, why did you only repeat the linear-gradient(to bottom, #FF9100, #FA6800);? Must I repeat all gradient lines from the other css class? – clement Mar 19 '14 at 08:03

Background-image with background-gradient

1 Answers1