Hi. So, I have created a new footer on my page that uses an image as a background. It’s a very small square image tiled both ways. The thing is, it opens just fine on all pages, but on specific pages on phone, the image doesn’t load at all. Doesn’t happen on desktop for the same pages.
Is there something I’m missing?
Here’s the page in question: https://moldbreaker.studio/packages/sma.html
I don’t see any obvious reason why it would not load. Though the page does have a lot of large images, it may just be taking a long time to load them all on a mobile.
Are you talking about this image?
That is a very large image and a higher files size than I would use for almost any image on a webpage. It’s nearly 400k for a repeating background. I would expect to be using something a hundred times smaller in file size than that (around 4k for that effect).
Notwithstanding the image size I checked every page on my iphone and it seems to display the image OK so I think you must mean something else?
There is an issue where the last line of the footer text pokes out of the background and that’s simply because you have applied a height to the footer when you don’t actually need a height at all and should let content dictate the height.
If the above is not the issue you were talking about then a screenshot of the problem would help and also identifying on what page it occurs.
I assume you have tried clearing cache etc in case the css was caching an old version or old css.
Another point to consider, with the nature of the image, being a subtle grain texture, you could easily cover your back by adding a plain colour fall-back background in dark grey.
That would mean that in the event that the image fails to load, the page will not look drastically different and the user probably would not even be aware they were missing anything.
On my Android phone the background doesn’t appear. It’s just a white background at the footer instead.
Phone is an A20, Phone browser is Chrome is version 90.0.4430.91
Another data point is that another browser called Samsung Internet (v 14.0.1.62) on the same phone does show the footer background.
And still another, is that refreshing the Chrome browser page results in the footer background appearing.
Must be something about that image that Android doesn’t like but I don’t have an android device so can’t help.
I would suggest deleting the image completely and create a new one with a different name and keep the file size down to under 10k and use a background color fallback as Sam suggested (and remove the silly height values).
Hey guys, thank you so much for the help. I never got to the bottom of the problem. I can confirm that it only happens on the Chrome browser on phones, and a reload sorts the problem out.
As for footer height - I put separate heights for all breakpoints - which I agree is absolutely clumsy work. I am not a fan of setting heights myself, but the footer contains floated elements and because my frontend has gotten extremely rusty (coding after a year), I completely forgot about the overflow: hidden rule that containers with floated elements should have. I’ve added said code and removed all height rules from all footer instances.
As for the fallback - thanks a bunch for pointing another major point out. At first I put it wrong - the image first and then the color, making the browser always go for the color. Now I’ve coded it correctly:
background-color: #253031;
background-image: url(assets/grain-dark.jpg); /And because now I cannot use repeat as it’s no more the background shorthand:/
background-repeat: repeat;
Everything works fine. I am getting the fallback color in case the image fails to load.
As for the image being heavy - I remember using a 100x100px image, somehow I’ve used a different one in the last moment. I’ve reverted to the original 100px by 100px (25kb) image now which tiles, making the footer less heavy.
Thanks once more, you guys are the best!
Try using the online HTML validation tool:
https://validator.w3.org/nu/?doc=https%3A%2F%2Fmoldbreaker.studio%2Fpackages%2Fsma.html
…and the online CSS validation tool:
The HTML and CSS errors encountered makes different browsers guess your intentions. This could cause certain images not to appear in some browsers.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
