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

Safari has an apparent bug where it won't show some jpg/JPEG images of a certain type in backgrounds if some criteria are met. For online use there is a type of jpg image called Progressive JPEG. Regular jpg images encode the image data from top to bottom, and you can see them load that way online. Progressive JPEG, on the other hand, encodes the image in progressively higher detail. This means that it loads fuzzy at first and then gets clearer. Some people think this looks better online, which is why it's used. Some image optimizers will automatically make jpgs progressive for online use.

In my experience, Safari won't display jpgs when some of the following criteria are met:

• progressive encoding is used
• the image is a background (for an element or the whole page)
• the image is large (I don't know how big exactly, but I ran into problems with images that were in the thousands of pixels wide)
• possibly other things, I haven't fully explored this bug

I have not been able to recreate this in any browser except Safari.

To fix this, you can either re-save the image, making sure that it isn't in a progressive format (photoshop, etc have a selector for this), or use another format (gif, png, etc)