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?

Answer 1

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;
}