Home/ Questions/Q 9315427
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-19T02:21:48+00:00

Not sure what I have going wrong here. The gradient is showing fine, but

  • 0

Not sure what I have going wrong here. The gradient is showing fine, but the image is not.

Page is located here (wordpress site):

http://philfaranda.staging.spatialmatch.com/

body {  
    background-color: #FFF !important; /* fallback color if gradients are not supported */
    background: #fff url(/wp-content/uploads/2013/01/body-bg2.png) repeat-x !important;
    background-image: -webkit-linear-gradient(top, #fff, #A9A9A9) !important; /* For Chrome and Safari */
    background-image:    -moz-linear-gradient(top, #fff, #A9A9A9) !important; /* For old Fx (3.6 to 15) */
    background-image:     -ms-linear-gradient(top, #fff, #A9A9A9) !important; /* For pre-releases of IE 10 */
    background-image:      -o-linear-gradient(top, #fff, #A9A9A9) !important; /* For old Opera (11.1 to 12.0) */
    background-image:         linear-gradient(to bottom, #fff, #A9A9A9) !important; /* Standard syntax; must be last */
}

EDIT: Also seems that the gradient effect isnt being displayed in IE, the image is…

Thanks in advance for any help,
Ken

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    background-image ovverides backgorund. To make it properly work, there also need to be separatelly specified background-repeat. Tested in FF

    body{
    background-color: #fcfcf0;
    background-repeat:repeat-x;
    background-image: url(../img/abdul.jpg), -moz-linear-gradient(top, #fff, #A9A9A9);
    /* And the same with other ugly prefixes */
    /* For older IE*/
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#A9A9A9');
}

    After comments from Ken it seems that there will be problem with IE 9. It cannot deal with gradients and images.

    Now, to make it work in IE, you should add gradients similar as above code snippet, than wrap your entire content in div for which you should add image css.

    <body style="gradients styles...">
<div style="background-image styles">
Your content
</div>
</body>
    • 0