Question

I have a website that requires a very large background image. The page loads correctly in all web browsers I have tried except the Safari on the iPhone and the iPad. In Safari on these two mobile devices the background only covers the left 50% of the page.

From all the testing I have done I can tell that is because of the length of the background image I am using. This is my css:

#bodyLong
{
    background-image:url('/Images/TaylorProductsBackground3459.jpg');
    background-repeat:no-repeat;
    width: 1150px;
    height: 3459px;
    margin: 0 auto;
    text-align: left;
    padding: 0px;
    position:relative; 
}

I know that there is something specifically wrong in this case because if I make one change to the CSS and set height: 1000px;, the background image is no longer shown twice across the back of the page. What can I do to fix this? I would prefer not to use such a large image but it is a client request and I have not been able to convince them otherwise.

Answer 1

I think you are running hard into a limit of the iOS version of Safari. Check all the doco on creating web pages for mobile devices and you might find something about image size limits.

Check the answer here: Image size limitations in mobile safari?

Possible solutions might be to use a smaller image size and scale it up if detail is not important, or to break up the image and tile it.

But seriously, why would you need a 3500px sized image as a background. Bad idea(TM)