A new site I'm working on is looking good in the major browsers, mac and pc, but something's wrong when viewed on an iPad2 - specifically the background tiles. In this design I use one giant bg image for the homepage, and a slightly different version for all the rest of the pages. I have a header.php and and header-2.php, and header.php has:

 <body id="homeback"> 

and the header-2.php has

 <body id="insideback">

When I remove the background tiles the rest of the page content all render normally; when I add the tiles they appear distorted and create a weird sort of margin. The tile is "expendable" for the inside pages but critical for the homepage.

See for the site under construction. We'll be adding a slideshow in place of the photo in the left column on the homepage and we're still fussing around with little details on inside pages but it's nearly done.

Any help would be greatly appreciated!!


As it turned out I learned something quite useful and should have stopped back to post the answer here.

After quite a lot of searching I found 2 articles: http://www.teknocat.org/blog/web-dev...-scaling-quirk

which linked to:


To summarize: there's a size-limit for background images/graphics that will be properly rendered by iphones/pads. Widths and heights can vary but the width times the height can't exceed 2,000,001 or the browser will shrink the graphic (which was what I was seeing). My background images were 1800px wide x 1200px tall (which equals 2,160,000) and 1800 x 1800 (which equals 3,240,000!) Had to make them smaller. Got sizes below 2,000,000 and whammo! they were fine!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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