Background fixed image issue with linear gradient on safari

Question

I have two fixed images on my website. The first one without linear gradient works fine on safari but as soon as I try to apply linear-gradient to the second image it disappears. I put -webkit- prefix but no success. I followed this link as well. Can someone tell me what is causing this issue ?

.intro { 
-webkit-background: url('../images/intro.jpg') no-repeat;
background: url('../images/intro.jpg') no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center center;
padding-top: 150px;
padding-bottom: 120px;
text-align: center;

}

.second-bg {
    background:  linear-gradient(to bottom, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .8) 59%, rgba(0, 0, 0, 0.65) 100%), url('../images/contact.jpg') no-repeat;
    background:  -webkit-linear-gradient(to bottom, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .8) 59%, rgba(0, 0, 0, 0.65) 100%), url('../images/contact.jpg') no-repeat;
    background-position: center center;
    background-size: cover;
    padding-top: 100px;
    background-attachment: fixed;
}

score 0 · Answer 1 · answered Jul 07 '15 at 16:32

0

Have you tried putting image first and then the linear-gradient?

background:  url('../images/contact.jpg') no-repeat, linear-gradient(to bottom, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .8) 59%, rgba(0, 0, 0, 0.65) 100%) no-repeat;
background:  url('../images/contact.jpg') no-repeat, -webkit-linear-gradient(to bottom, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .8) 59%, rgba(0, 0, 0, 0.65) 100%) no-repeat;

The image is there, but it's under linear-gradient and therefore not visible.

answered Jul 07 '15 at 16:32

Keammoort

3,075
15
20

I did try ... I tried every possible way and can't find out what it is ? – code4life Jul 07 '15 at 16:35
Maybe this will help you [Safari Gradients Resources](https://developer.apple.com/library/safari/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html) – Keammoort Jul 07 '15 at 17:02
Have you tried with different image? [see related bug](http://stackoverflow.com/questions/17341728/background-image-not-showing-in-safari) You could also try setting z-index: -1; as [described here](http://stackoverflow.com/questions/27749767/css-background-image-not-appearing-in-safari) – Keammoort Jul 07 '15 at 17:13
z-index: -1; did not help – code4life Jul 07 '15 at 17:25
What Safari version are you targeting? – Keammoort Jul 07 '15 at 17:31
I found the issue and answered to my question. Thank you – code4life Jul 07 '15 at 17:35
No problem, don't forget to mark your answer as correct one. – Keammoort Jul 07 '15 at 17:47

score 0 · Accepted Answer · answered Jul 07 '15 at 17:34

The issue lies on linear gradient (to bottom .... ) I changed it to (left bottom ... )

    background: -webkit-linear-gradient(left bottom, rgba(0, 0, 0, .5) 29%, rgba(0, 0, 0, 0.65) 100%), url('../images/contact.jpg') no-repeat;

and solved the problem. Another thing to point out is the image has to come after gradient otherwise it will not work.

Solution:

change the gradient to (left bottom ...)
image url has to come after gradient

Background fixed image issue with linear gradient on safari

2 Answers2