32

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

19 Answers 19

46

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)

3
  • 4
    +1 Wow, this is seems like a pretty obscure bug. It would be nice if there was some way to see if Apple (maybe WebKit?) recognizes it.
    – Whymarrh
    Feb 20, 2014 at 6:40
  • 1
    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
    – Zeev G
    Nov 4, 2014 at 10:32
  • This should be the correct answer. Seems like most of the other answers below are just syntax issues which don't directly answer the original question. Nov 6, 2019 at 5:40
18

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

2
  • The issue with this CSS is the order of the attributes given to background. The no-repeat has to go last. See MDN
    – mikabytes
    Feb 15, 2018 at 13:05
  • @mikabytes in my case, the no-repeat is already last. but it fails when given a css color variable as the first value. had to move the background-color value as a separate property.
    – RZKY
    Sep 9, 2020 at 12:21
13

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>

7

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.

0
7

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

Try to change or remove :::

background-attachment:fixed;

its works for me in safari.....

3

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;
}
2
  • nice one harmeet, maybe you have a look at this and change it to .png w3.org/QA/Tips/png-gif - happy coding
    – caramba
    Jun 27, 2013 at 11:53
  • It was already a png! I then converted it into jpg but it still didn't work so then i converted into the good old gif to and that did it. Thanks though. ;) Jun 27, 2013 at 12:01
2

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.

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

2
  • can you give me the direct link to the picture, ??../images/bg.jpg
    – caramba
    Jun 27, 2013 at 11:30
  • Found the solution. I will post the solution separately, thanks for looking into it though, appreciate it. Jun 27, 2013 at 11:46
1

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

1

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

1

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.

1

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.

0

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.

0

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

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.

0

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

0

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

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

2
  • 2
    Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Apr 21, 2022 at 14:31
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Apr 21, 2022 at 17:23

Not the answer you're looking for? Browse other questions tagged or ask your own question.