Help
I'm hoping someone here can help me or point me in a helpful direction.
I'm working on a website that has one giant background image for the homepage and a different giant background image for all the other pages. The site is built in WordPress (my custom theme) so I have two header templates, one for the homepage (header.php) and one for the rest (header-2.php). I call the images by using a body id for each header, ie:
<body id="homeback">
for the home (header.php) and
<body id="insideback">
for the inside pages (header-2.php)
In my stylesheet I have:
body { margin: 0; padding: 0;}
#homeback {background:#ffd291 url(images/homebg.jpg) no-repeat center top;}
#insideback {background:#ffd291 url(images/insidebg.jpg) no-repeat center top;}
Simple, and works beautifully on desktop and laptop, mac and pc, IE8, Chrome, FF, Safari. But on the iPad 2 the backgrounds get shrunk down and are fully visible, throwing off the design.
I don't know how to trouble-shoot this - all my other sites have been fine in iPads.
Site under construction can be seen at: http://66.147.244.93/~weddioi2/
See homepage with wedding couple on the side - then see this screenshot of the same page from my iPad 2:
http://66.147.244.93...ddioi2/home.PNG
Click on "featured weddings"link and see that page, then see this screenshot: http://66.147.244.93.../insidepage.PNG
The background tiles are 1800px wide and 1200+ px deep. They're meant to provide some ambience but not be fully seen.
Any help would be wonderful!
