How to combine Background Image and CSS Gradient

Question

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

Also very similar to http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients — , Feb 19 '13 at 21:31

score 2 · Accepted Answer · 2013-02-19T22:31:05.393

2

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>

edited Feb 19 '13 at 22:31

answered Feb 19 '13 at 20:54

That didn't seem to work, I changed each definition to be like your example. I think you missed a comma in your example though between the #A9A9A9) and the #fff url(. – Ken Feb 19 '13 at 21:06
Ah, sorry, it still need a bit modification, ill update in few minutes. The problem is with repeat. – Feb 19 '13 at 21:23
Actually, Just noticed, neither gradient nor Image is being displayed in IE now :( – Ken Feb 19 '13 at 21:46
Got the gradient working, but no image still showing in IE, any suggestions? – Ken Feb 19 '13 at 21:54
It's working for me in IE9, I added this "filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#A9A9A9');" – Ken Feb 19 '13 at 22:03
True, with that filter gradient will work, but it is unusual MS solution that will not work combined with image. Filter will be drawn above image no mather what. Try adding margins to body and `background-image: url(../img/abdul.jpg);` to set image for IE and you will see gradient, and *below* (on margins area) that image. – Feb 19 '13 at 22:15
I found this in a different thread "To work around IE's issue you can place the filter and the background image in separate layers. That would obviate the power of CSS3 multiple backgrounds, though, since you can just do layering for all browsers" Just not really understanding what to do. – Ken Feb 19 '13 at 22:29
What update? lol Not seeing anything new. I see where u are talking about adding margins, just not quite sure what exactly to do. – Ken Feb 19 '13 at 22:45
Added part with html ` – Feb 19 '13 at 22:46

How to combine Background Image and CSS Gradient

1 Answers1