Radial-gradient over a background image does not work on Safari

Question

I'm trying to add a radial gradient over a background image. It works perfectly on Chrome and Firefox, but it does not on Safari. I can't figure out why.

Here is my css :

   #banner {
        background-attachment: scroll, scroll, scroll, fixed;
        background-color: #fff;
        background: radial-gradient(circle at 60% 30%, rgba(0,0,0,0.1), rgba(0,0,0,0.7)),url(../images/fond2.jpg) center left no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        }

I tried using :

       background : -webkit-radial-gradient(circle at 60% 30%, rgba(0,0,0,0.1), rgba(0,0,0,0.7)),url(../images/fond2.jpg) center left no-repeat;

But it still does not work. Any idea on how I could fix that ?

Thanks !

score 1 · Accepted Answer · edited May 23 '17 at 11:57

CSS

 #banner {
    background-attachment: scroll, scroll, scroll, fixed;
    background-color: #fff;
  /* Safari 5.1 to 6.0 */
   background:-webkit-radial-gradient(60% 30%, closest-side,rgba(0,0,0,0.1),              rgba(0,0,0,0.7)); 
  /* For Opera 11.6 to 12.0 */
  background:-o-radial-gradient(60% 30%, closest-side,rgba(0,0,0,0.1), rgba(0,0,0,0.7));
  /* For Firefox 3.6 to 15 */
   background:-moz-radial-gradient(60% 30%%, closest-side,rgba(0,0,0,0.1), rgba(0,0,0,0.7));
  /* Standard syntax */
   background:radial-gradient(60% 30%, closest-side,rgba(0,0,0,0.1), rgba(0,0,0,0.7));
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

You can also check: http://www.w3schools.com/css/css3_gradients.asp or How do I combine a background-image and CSS3 gradient on the same element?

score 0 · Answer 2 · answered Jul 25 '14 at 08:56

Ok, it turns out the problem comes from the 'circle'. For old version of Safari I had to use.

background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.1) 0%,rgba(0,0,0,0.7) 90%), url(../images/fond2.jpg) center left no-repeat;

It's not exactly the same effect, but it is a good fallback.

Hope it helps !

Radial-gradient over a background image does not work on Safari

2 Answers2