Background shows in Mozilla but not in chrome

Question

I've applied a background to a div. it shows in mozilla but not in chrome.

Here is my code

#product-header {
    background: -moz-linear-gradient(-70deg, #578EA3, #34495E) repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #FFFFFF;
    padding-bottom: 9px;
    padding-top: 10px;
    text-align: center;
}

Where I'm going wrong?

Having only a `-moz` vendor-prefixed value tells you something, no? Just remove the prefix. — Fabrício Matté, Mar 15 '14 at 19:55
Well, I knew its something to do with `-moz`, I removed it but still didnt worked. — Praful Bagai, Mar 15 '14 at 19:56
The syntax seems correct, the standards-compliant `linear-gradient()` is supported in Chrome and Firefox http://caniuse.com/css-gradients — Fabrício Matté, Mar 15 '14 at 19:58

score 1 · Accepted Answer · answered Mar 15 '14 at 19:56

You've used background property which is explicit for mozilla only. You should add one suitable for chrome:

-webkit-linear-gradient(-70deg, #578EA3, #34495E) repeat scroll 0 0 rgba(0, 0, 0, 0);

You could also use plain linear-gradient like:

linear-gradient(-70deg, #578EA3, #34495E) repeat scroll 0 0 rgba(0, 0, 0, 0);

Putting it allthogether:

#product-header {
    background: -moz-linear-gradient(-70deg, #578EA3, #34495E) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: -webkit-linear-gradient(-70deg, #578EA3, #34495E) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: linear-gradient(-70deg, #578EA3, #34495E) repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #FFFFFF;
    padding-bottom: 9px;
    padding-top: 10px;
    text-align: center;
}

No problem ;). I can also add that if you're aiming for cross-browser compatibility there are some more prefixes: -o- (for opera) and -ms- for IE — Ernest Nowacki, Mar 15 '14 at 20:04

Background shows in Mozilla but not in chrome

1 Answers1