IE and Safari don't show background images

[Azzurra]

With Chrome and Firefox all is ok.

Instead, Internet Explorer and Safari don’t show background images and other images.

They don’t show:

– home page background image;
– header background images (all pages);
– home page normal image block (person picture).

Can you help me, please?

Thanks.

[David]

Hi there,

i am not seeing the issue – can you make sure browser caches have been cleared?

Also are you using Safari on a Windows PC ? If so this is an unsupported browser.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Azzurra]

I use Safari on Mac and iPhone.

Do you see the site correctly on Safari for Mac/iOS? Please, can you send me a screenshot?

Just cleared the cache of Safari on my iPhone and the background image (with Background Color Overlay) doesn’t show in the homepage.

I also tried with Safari private browsing, but the problem still remains.

Here is the correct view on Chrome

Here is the wrong view on Safari

[David]

For sure:

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Azzurra]

Here is what I see on Chrome (correct)

Here is what I see on Safari for Mac (wrong)

Here is what I see on Safari for iPhone (wrong)

I cleared the browsers’ cache, the problem still remains.

Same in IE.

[David]

Right click and inspect the broken image – see if there is an error in the console that may highlight the problem. Let me know

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Azzurra]

Just tried but I’m not an expert and I don’t know what I should find.

[Azzurra]

My client confirmed the site has problem with Safari on mobile: background image not show up.

[Azzurra]

I found the problem: Safari doesn’t support WebP images because Apple don’t want.

How can I do to “tell” to browser who don’t support WebP images to load, instead, the original (jpg or png) images?

[David]

Peculiar as my Mac is picking up the fallback PNG in Safari.
What plugin/service are you using to server up the WebP images ? I wonder if that developer has any insight

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Azzurra]

Now I remove the WebP images and all works well, but it isn’t a solution.

I’m using SG Optimizer, but it can’t serve fallback images.

Now I’m trying Imagify but I got the same result.

[David]

I am not sure but i think some plugins like Smush handle WebP with fallback – but they are generally part of their pro versions only.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Azzurra]

Yes…but the plugin alter the HTML, replacing image tags with picture tags, and I got a problem with GeneratePress: all images are not showing anymore.

To fix I removed the WebP images.

[Author]

Posts