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

score 46 · Answer 1 · answered Jul 16 '13 at 04:19

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)

+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 '14 at 06:40
to check if your image is progressive go to: http://techslides.com/demos/progressive-test.html . to fix just open in photoshop and go to the menu file->save for web — Zeev G, Nov 04 '14 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. — Hunter Nelson, Nov 06 '19 at 05:40

score 18 · Answer 2 · edited Feb 21 '17 at 09:57

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

edited Feb 21 '17 at 09:57

ovabrandon

826
10
17

answered May 24 '14 at 06:12

Mehar

2,158
3
23
46

The issue with this CSS is the order of the attributes given to `background`. The `no-repeat` has to go last. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background#Syntax) – mikabytes Feb 15 '18 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 09 '20 at 12:21

score 13 · Answer 3 · answered Dec 19 '15 at 03:41

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>

score 7 · Answer 4 · answered Nov 17 '14 at 15:48

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.

answered Nov 17 '14 at 15:48

Jonathan

167
1
8

score 7 · Answer 5 · answered Apr 15 '16 at 09:52

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.

score 5 · Answer 6 · answered Jun 17 '16 at 06:21

5

Try to change or remove :::

background-attachment:fixed;

its works for me in safari.....

answered Jun 17 '16 at 06:21

Balvant Ahir

610
1
9
16

score 3 · Accepted Answer · edited Jul 28 '16 at 18:33

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

edited Jul 28 '16 at 18:33

Nisse Engström

4,738
23
27
42

answered Jun 27 '13 at 11:48

AspiringCanadian

1,595
6
24
43

nice one harmeet, maybe you have a look at this and change it to .png http://www.w3.org/QA/Tips/png-gif - happy coding – caramba Jun 27 '13 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. ;) – AspiringCanadian Jun 27 '13 at 12:01

score 2 · Answer 8 · answered Oct 07 '16 at 15:23

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.

score 1 · Answer 9 · answered Jun 27 '13 at 11:24

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

answered Jun 27 '13 at 11:24

caramba

21,963
19
86
127

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

score 1 · Answer 10 · answered Nov 04 '14 at 10:37

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

score 1 · Answer 11 · edited Aug 09 '17 at 09:56

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

score 1 · Answer 12 · answered Jan 08 '18 at 15:21

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.

score 1 · Answer 13 · answered Aug 25 '20 at 13:26

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.

score 0 · Answer 14 · edited Jul 28 '16 at 18:27

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;

edited Jul 28 '16 at 18:27

Nisse Engström

4,738
23
27
42

answered Jun 27 '13 at 13:34

sarfaraj

158
6

score 0 · Answer 15 · answered Dec 23 '14 at 00:36

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.

score 0 · Answer 16 · answered Dec 14 '16 at 17:31

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.

score 0 · Answer 17 · answered Jul 25 '19 at 18:21

0

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

answered Jul 25 '19 at 18:21

Gavin Friel

125
12

score 0 · Answer 18 · answered Feb 28 '20 at 11:29

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;

Bowman Kelley · Answer 19 · 2022-04-21T15:04:14.927

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

edited Apr 21 '22 at 15:04

answered Apr 21 '22 at 13:51

Bowman Kelley

21
3

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](/help/how-to-answer). – Community Apr 21 '22 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](/help/how-to-answer). – Community Apr 21 '22 at 17:23

Background image not showing in Safari

19 Answers19

Linked

Related