Unable to use gradient along with image in CSS

Question

Unable to use gradient along with image.

This works:

background: red url("/Style Library/Images/Recurr.png") center no-repeat

This wont work:

background: linear-gradient(black, white) url("/Style Library/Images/Recurr.png") center no-repeat

How to use gradient along with image.

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) — Amarnath Balasubramanian, Feb 28 '14 at 11:21
As a note that the `linear-gradient` or `radial-gradient` is treated as some kind of on-fly-created image, that means you have to use the `multiple background image` feature of css3, so you should use the commas to separate all the background image urls. — King King, Feb 28 '14 at 11:27

score 2 · Answer 1 · answered Feb 28 '14 at 11:26

2

You can use it.

See this:

background: #6cab26;
background-image: url(/Style Library/Images/Recurr.png); /* fallback */
background-image: url(/Style Library/Images/Recurr.png), -webkit-gradient(linear, left top, left bottom, from(#6cab26), to(#6ceb86)); /* Saf4+, Chrome */

answered Feb 28 '14 at 11:26

Siyah

2,852
5
37
63

1

A fallback is an alternative method for browsers if they don't support your code. – Siyah Feb 28 '14 at 11:36

score 0 · Accepted Answer · answered Feb 28 '14 at 11:43

The key is to use background-image for image and background for gradient.

I have included redundancies for other browsers.

.Blue{
    background:#47b; /* Old browsers */
    background:-webkit-linear-gradient(top,#47b 0%,#249 100%); /* Chrome10+,Safari5.1+ */
    background:-o-linear-gradient(top,#47b 0%,#249 100%); /* Opera 11.10+ */
    background:-ms-linear-gradient(top,#47b 0%,#249 100%); /* IE10+ */
    background:linear-gradient(to bottom,#47b 0%,#249 100%); /* W3C */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4477bb',endColorstr='#224499',GradientType=0); /* IE6-9 */

    background-image: url("/Style Library/Images/Recurr.png") center no-repeat;
}

Unable to use gradient along with image in CSS

2 Answers2