CSS - Background Images Not Displaying Properly on Mobile Browsers

CSS Background Image not displaying on mobile

So, what are some other differences between those two images? Mostly pertaining to pixel size.

Mobile Safari has a pixel threshold, which actually has nothing to do with size in kb of the image, but the amount of pixels. What are the sizes of the images that aren't displaying? Are they longer or taller than the ones that are?

Here is a link to the Safari Web Content Guide. Scroll down to the Known iOS Resource limits and see if you fall under any of those categories!

background-image shows correctly on desktop browsers, not shown on mobile browsers

I managed to find an answer. For some reason, on mobile, you need to add background-size: 100%;

Background image not displaying on mobile devices

I solved the problem with:

/* This image will be displayed fullscreen */
background:url('../img/spoon.jpg') no-repeat center center;
min-height:100%;
background-size:cover;
}

body{
/* Workaround for some mobile browsers */
min-height:100%;
}

CSS image background not showing on some pages for mobile

I found I did not clear cookies correctly on my browser. I am very late to respond, sorry!

Background image is not displayed properly only on Android browsers

Try to add:

html{
    height:100%;
    min-height:100%;
}
body{
    min-height:100%;
}

CSS background-image not working properly on android mobile

Unfortunately not, this seems to be a bug which Google has never fixed.

I personally dealt with exactly the same issue last week and ended up giving up on looking for a solution.

The bug submission

For the record, it is also not posible on Safari on iOS.

---

Related Topics