Question

I’m using this code for a div

background: url(../img/texturee.png), linear-gradient(left, #de2785 1%,#f954b1 50%,#de2785 100%);

and to add vendor prefixes I’m using this library http://leaverou.github.com/prefixfree/

It’s working fine in Chrome, Firefox, Safari, iPhone, iPad but not in Android 2.3.6 default browser. Am i doing something wrong?

http://caniuse.com/#search=gradients

Edit:

After @mdmullinax answer I changed it to

background: url(../img/texturee.png), -webkit-linear-gradient(left, #de2785 1%,#f954b1 50%,#de2785 100%);

but still not working.

Answer 1

possible you’ll need to use the outdated gradient syntax…-webkit-gradient

Surfin’ Safari – Blog Archive » Introducing CSS Gradients – documentation on outdated syntax

Surfin’ Safari – Blog Archive » CSS3 Gradients – see the paragraph on Changes from -webkit-gradient

caniuse.com briefly notes this

Note: Partial support in Safari/Chrome refers to requiring an outdated gradient syntax to work

but doesn’t provide any additional details

EDIT:

perhaps try

/* bkgd w/outdated webkit gradient */
background: url(../img/texturee.png), 
            -webkit-gradient(linear, left top, left bottom, color-stop(1%,#de2785), color-stop(50%,#f954b1), color-stop(100%,#de2785));
/* bkgd w/standards gradient */
background: url(../img/texturee.png), 
            linear-gradient(left, #de2785 1%,#f954b1 50%,#de2785 100%);