(Really) Long Background Image Does Not Render on iPad Safari

(Really) Long Background Image Does Not Render on iPad Safari

Mobile Safari has limits to what size background images it will display before subsampling, you may be getting hit by this problem because of the size of your background:

The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM.

That is, ensure that width * height ≤ 3 * 1024 * 1024 for devices with less than 256 MB RAM. Note that the decoded size is far larger than the encoded size of an image.

see: Know iOS Resource Limits

Background image does not display on iOS

@Pete: I would use a media query to load a smaller image if the screen size isn't too large - not sure who has a screen resolution of 4000px so you may want to make them smaller anyway. not sure why your white one would work

Me: reducing from 4000w to 2000w did the trick, but i am not sure why. the white version displayed on iOS at 4000w.

Background image not showing in Safari

I converted the image format from jpeg to gif and it worked. So the final CSS is :

.bgMainpage{
    background:url("../images/bg.gif") no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
}

---

Related Topics