使用背景图像和css3渐变

Question

I'm unable to use background image along with the css3 gradient. I've gone through many solutions but i'm still unable to get the image. My Fiddle

Here's the image

Image used is transparent.I've tried adding background-image: url("img.png"), -webkit .. but this doesn't seem to work.Also tried having a div in below manner ..

<div id="div-with-gradient">
   <div id="div-with-image">
    <!-- content -->
    </div>
</div>

Any solutions really appreciated..

Answer 1

You might want to check this demo I did last week http://dabblet.com/gist/3106299

It uses an image and a CSS3 gradient on the same element.

---

Regarding your fiddle, url('../img/msg_arrow.png') won't work in jsFiddle - you need to specify the full path.

Also, you are overriding your style with

.btn1 {
    background-color: #f47e29;
    border: solid 1px #b16127;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f48c41', endColorstr='#d66f24',GradientType=0 ); /* IE6-8 */
    padding: 0 26px;
}

which sets the solid orange background.

And another thing I've noticed just now: the use of background-image isn't right either:

background-image: url('../img/msg_arrow.png') scroll 0 0 no-repeat, linear-gradient(bottom, #000000, rgba(0,0,0,.12) 0%, rgba(0,0,0,.12) 49%, rgba(72,72,72,.12) 50%, rgba(247,245,245,.12));

You need to use background there instead of background-image .

Finally, one more thing to note is that backgrounds are displayed stacked one on top of another and the last background listed is the one at the bottom of the stack. In your case, it is the gradient that is displayed behind the semitransparent image. And since your gradient is made up of colours having a 0.12 fourth RGBa value (alpha), which is very low, it may be very difficult to spot behind another image, even when everything is working fine.