Css background image not showing on mobile

I have an issue where my background image in my headers don’t work on mobile.
This is my website: http://gotpuzzles.rf.gd/index.php

It’s the background image in the header of the “Home” page and the “Sigil Quiz” page I’m talking about. On iPad (safari), iPhone (safari) and samsung (samsung internet) the background image is just invisible. But for some reason it does work on samsung when I use chrome.
The image on the “Character Quiz” page does work for some reason although it’s the same just with another url.
It’s not due to the size of the image since they are just 500kb and 300kb.
I’ve searched for solutions online but I couln’t find anything so this is my last hope.
If anyone could help me it would be very much appreciated!

if it is not a browser cache problem,
what I suppose is that you have so much resources to load
and it takes so long until the picture you are talking about does not come in the loading sequence

I would recommend you to optimize all images with this service https://tinypng.com/

That would be weird because on the page where I have to load the most (Character Quiz), the background image works fine. But one the pages like the Home page where I only have to load 1 image it doesn’t work.

with your style.css it’s all right


even when you use shorthand (sequence is OK - color then img )

Safari supports all this (long ago it had problems with progressive images, fixed positions, etc.)

images exist

If it is not a cache problem then either the safari acting weird or it’s up to the OS itself
and when you use chrome or some unintegrated browser then OS settings are “overridden”

unless I’ve overlooked something :smile:

I got myself a new domain and transferred all the files to the new website and for some mysterious reason everything works fine now. :stuck_out_tongue:

1 Like


This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.