'Background image not showing in Safari

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


Solution 1:[1]

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

Solution 2:[2]

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)

Solution 3:[3]

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

Solution 4:[4]

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>

Solution 5:[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.

Solution 6:[6]

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.

Solution 7:[7]

Try to change or remove :::

background-attachment:fixed;

its works for me in safari.....

Solution 8:[8]

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.

Solution 9:[9]

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

Solution 10:[10]

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

Solution 11:[11]

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

Solution 12:[12]

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.

Solution 13:[13]

I ran through the same issue, and the solution was very weird, but I will post it here in case it will work for someone.

I had this code:

footer {
  margin-top: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("footer.png");
  background-repeat: repeat;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
}

And background image was not showing in safari, but when i removed the display: flex line it showed up properly, with no changes in other browsers. I don't now why and how this worked, but maybe it will help someone.

Solution 14:[14]

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.

Solution 15:[15]

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;

Solution 16:[16]

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.

Solution 17:[17]

Change the background property to background-image and everyone's a winner.

Solution 18:[18]

My problem was that in short form css 

background: url('image.png') no-repeat scroll center center #mycolor;

was a background color. The solution was simply to put it in a separate element style like here

background: url('image.png') no-repeat scroll center center;
background-color: #mycolor;

Solution 19:[19]

I am using UI Kit and I had to remove uk-img ="" and it fixed the problem in Safari 15.2. I tried everything else recommended in this thread but that was how I fixed the issue.

Reference to this is here - https://getuikit.com/docs/image

Related Questions