Search code examples
htmlcssgoogle-chromemozilla

Background shows in Mozilla but not in chrome

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?

Solution

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