Background image not showing in Safari

2019-01-06 20:38发布

问题:

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;
}

回答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)



回答2:

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 :)



回答3:

I got here from a google search page, so in case this issue comes up for someone else, just make sure you double check your code. Safari can be very picky about correct code, so even if it's typed correctly here in the question, just do a double check of that. If you forget the end parenthesis, it won't show, where other browsers like Chrome will assume you meant to put it and render the page correctly. Make sure all of your code is properly opened/closed:

<div style="background-image:url('../images/bg.jpg');">HEY</div>



回答4:

Had the problem and found this, but nothing worked. Eventually found out that URL() was missing its closing parentheses. Even without it, background images worked on IE 9+, Edge, Chrome and Firefox. Only Safari, of the tested browsers, did not show background images.

Added the ) and everything worked.



回答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.



回答6:

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



回答7:

I had the same problem. my image was progressive and like JC Hulce answered, safari has a bug with that.
To check if your image is progressive go to: techslides.com/demos/progressive-test.html .
To fix just open in photoshop and go to the menu file->save for web



回答8:

Try to change or remove :::

background-attachment:fixed;

its works for me in safari.....



回答9:

I converted the image format from jpeg to gif and it worked. So the final CSS is :

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


回答10:

Please try with following code, you might need to change the width and height and url.

.gallery {
   height: 190px;
   width: 940px;
   margin-bottom: 13px;
   background-color: transparent;
   background-image: url("/img/user/admin/photo.jpg");
   background-repeat:no-repeat;
   background-position: center bottom;
   background-attachment: scroll;
   background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
}



回答11:

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.



回答12:

Try this code.

.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;


回答13:

It seems safari doesn't like:

background-attachment: fixed;

But I still want to have some parallax, especially on desktops. So, my solution was to remove the above from the plain .header class and put it under:

@media(min-width: 1334px)

This has my image displayed on most iPhones up through the iPad. It just doesn't cover iPhone 6 Plus. This phone's resolution is getting into desktop territory.



回答14:

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.



回答15:

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.