Search code examples
iphonecssmobile-safari

iPhone not showing multiple backgrounds?

I'm having issues with this particular site not showing one of the backgrounds. I didn't design the site and it just got handed to me today.

But the URL is: http://musicalchairswc.com/

The CSS is:

div.body_wrapper {
  background-image:url(img/big_bg_mod.jpg), url(img/bg_gradient.jpg);
  background-repeat:no-repeat, repeat-y;
  background-position: center -25px, center top;

}

But on an iPhone, the first background (img/big_bg_mod.jpg) doesn't show up. As far as my understanding goes - Mobile Safari now supports multiple backgrounds, yes?

Thanks beforehand for any pointers.

Solution

  • Read the fine documentation.

    http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482-SW15

    The maximum decoded image size for JPEG is 32 megapixels using subsampling.

    Here is the way I would approach it.

    div.body_wrapper {
  background-image:url(img/big_bg_mod_1-1.jpg), url(img/big_bg_mod_1-2.jpg), url(img/big_bg_mod_1-3.jpg), url(img/bg_gradient.jpg);
  background-repeat:no-repeat, repeat-y;
  background-position: center -25px, center 1000px, center 2000px, center top;
}

    I split big_bg_mod.jpg (2320x1000, 2320x1000, 2320x320)