Question

I’ve got some strange problem around multiple backgrounds. I use a combination of linear gradient, radial gradient and a repeated gif picture to make the background for page.
Here is the css I assign to main container (first inside the body):

    background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,.8) 100%),                                                -moz-radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%),     url("../img/bodyBackground.gif");
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(75%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,.8))),  -webkit-radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%),  url("../img/bodyBackground.gif");
    background-image: -o-linear-gradient(top, rgba(0,0,0,0) 75%,rgba(0,0,0,.8) 100%),                                                   -o-radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%),       url("../img/bodyBackground.gif");
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 75%,rgba(0,0,0,.8) 100%),                                                  -ms-radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%),      url("../img/bodyBackground.gif");
    background-image: linear-gradient(top, rgba(0,0,0,0) 75%,rgba(0,0,0,.8) 100%),                                                      radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%),          url("../img/bodyBackground.gif");
    background-repeat: no-repeat, no-repeat, repeat;

I used css3generator for it, so I’m almost sure that gradients are OK.
Next, I use modernizr to make a fallback for ald browsers. This style is assigned to the container, if it is nside .no-js, .no-multiplebgs or .no-cssgradients html:

background-image: url("../img/bodyBackground.gif")

All browsers seem to work perfectly, IE9 falls back correctly, but opera… I test in Opera 11.11, and it displays no background at all. Same time, modernizr says it has multiple backgrounds AND css gradients feature. I just can’t find out what am I doing wrong.

Look at my site please, and help!

Answer 1

I think I can help a little (just ran into the same problem)…:

Opera as of now only supports linear-gradients (see here, note on radial-gradients; Mar2011). To get the linear part working in your example you need to add a dot for opacity 0 like so:

-o-linear-gradient(top, rgba(0,0,0,0) 75%,rgba(0,0,0,.8) 100%), 

into this:

-o-linear-gradient(top, rgba(0,0,0,.0) 75%,rgba(0,0,0,.8) 100%), 

You can add linear gradients as background images just like regular images, so I guess we will just have to wait for radial-gradient support.

Cheers

EDIT: Try this link showing how to make radial gradients in Opera via SVG.