Background image not showing in Safari

Question

I am working on a responsive design and the class "bgMainpage" is having a background image but it is not showing on Safari on all the devices. I have applied background size cover as it is what the client wants. I have added browser specific CSS too and I am not sure what else to do so that it shows up in Safari too. Chrome, FF, IE show the image just fine. Any ideas ?

Project Link

CSS :

.bgMainpage{
    background:url("../images/bg.jpg") no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
}

Answer 1

maybe because the picture is saved wrongly. I had this problem once to and had to change the following:

open your picture in photoshop and save it "cmyk" this option should be changeable in the view, configure-proof, cmyk-colors (sorry, my photoshop is all in german)

hope this helps

Answer 2

I was having a similar problem but I had no control over the image because it was being spawned by tumblr so the progressive suggestions didn't work. I double checked my code and anything else that was also suggested, finally I tried setting a MIN-HEIGHT to the div with the background-image and Safari finally displayed it like every other browser did. Hope that helps get rid of a few headaches.

Answer 3

I just ran into this issue and none of the proposed solutions fixed this. I did solve my instance of this and it was due to mixed protocols: the site was https while the bg images were http. This caused the loading of the images to silently fail and not display only on Safari, on MacOS and only for some users.

Answer 4

I had the same problem and none of the other solutions here fixed the problem. For me, I had a background image on an anchor wrapped in a div. All browsers handled the background image fine except for Safari 6. The fix for me was to set position:relative on the div and position:absolute on the anchor link.

Answer 5

I had the same problem with Safari. I tried other solutions, the only thing that worked for me was to remove a negative z-index.

Answer 6

I have the same issue and I have solved this issue by changing:

background: url("images/backgroundimage.jpg") no-repeat fixed 0 0 / cover rgba(0, 0, 0, 0);

to:

    background: url("images/backgroundimage.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;

and that is working good in safari now :)