8

i've added background images using CSS on the banner section of a few pages on a Wordpress site and they work fine on desktop on Chrome/Safari/IE/Firefox using auto-prefixer. For some reason on mobile browsers (I've tested on Chrome and Safari on my iPhone), some of the banner images display correctly while the others do not.

.banner {
position: relative;
overflow: hidden;
background: -webkit-linear-gradient(bottom left, rgba(37, 17, 36, 0.45), rgba(37, 17, 36, 0.45)), url(img/banners/home.jpg);
background: linear-gradient(bottom left, rgba(37,17,36,0.45),rgba(37,17,36,0.45)),url(img/banners/home.jpg);
background-size: cover;
text-align: center;
background-position: center center;
}

The image on the left is of a page which displays the background image correctly and the image on the right is of a page which does not. Both have exactly the same css apart from the image used:

enter image description here

UPDATE: After some advice from the guys, I tried to resize some of the images to see if they worked on Chrome/Safari on Mobile: enter image description here

As you can see the resized images did work on both Chrome and Safari on my iPhone. Apple's IOS documentation recommend a maximum size of 1024px but 1400px worked fine for me (although I did have to delete cookies and data in Safari settings on my phone)

6
  • Maybe the second link is broken. show us your code.
    – Itay Gal
    Commented May 10, 2014 at 21:35
  • 1
    I think there is a limit to the image size that mobile Safari will display, try to use a small image (< 1024px). Commented May 10, 2014 at 21:36
  • 1
    Hey guys just updated the ticket - The images display fine on Chrome, Safari and IE on Desktop but not on mobile. The strange thing is, some of the images work fine but others do not, so I'm a little baffled. Commented May 10, 2014 at 21:46
  • What is the difference between thos images? Is there as difference in px, kb size or format (jpg/png)? Commented May 10, 2014 at 21:56
  • If the image is too big, than it will be blured, it won't wanish. Be sure to set background-size after setting the background image, also, use vendor prefixes, so -webkit-background-size, -moz-background-size.
    – skobaljic
    Commented May 10, 2014 at 22:04

2 Answers 2

6

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!

4
  • I had this problem with displaying large maps, but the image is blured if it is too big.
    – skobaljic
    Commented May 10, 2014 at 22:06
  • Are you sure about that? The only reason the image should be blurred is if it does meet the size requirements, but the device does not have the memory to render it completely. On a side note, yes the canvas restriction is much smaller than the JPEG's (BOO!) Commented May 10, 2014 at 22:16
  • 2
    Ok guys, I just did some tests and resizing the images down to 1400px width did the trick. See above Commented May 10, 2014 at 23:17
  • @Cody I am sure the map images were blured on iPhone 4 and on Samsung S3, but not on simpler device such as first Sony Xperia. Had to split the map to smaller pieces.
    – skobaljic
    Commented May 21, 2014 at 20:13
3

This 2014 question is apparently still relevant in 2021. I just had an issue of a full page background image not loading on a OnePlus 5 when it loaded fine on every other device. Resized the image to 1400px width as per above comment from SlightlyClever, made that variant the one shown on mobile version, and it loads up fine. At the same time cut down the download from ~3MB to a bit under 1MB so that's nice too.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.