meteoracle

I was just in the midst of building a site with a rather large background that spills well outside of the 960 grid the site is built on (2000px of rather large to be exact).

It looked great on the large monitors in the office with this bit of CSS displaying this huge background nicely:

 #sitebg {
  background-image: url(../img/sitebg.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  left: 50%;
  margin-left: -1000px;
  min-height: 1200px;
  position: fixed;
  width: 2000px; } 

As the particular image I was working with had a central piece of text that a number of absolutely positioned divs relate to in positioning, the iPad pulled a lovely trick on me by automatically resizing the background image to fit the width of the screen.

All of a sudden my absolutely positioned divs looked like they were all over the shop due to the resizing of the background image. After a bit of digging, it turns out you need to tell the iPad the specific size of the background like this:

-webkit-background-size: 2000px 1200px;

Adding this to the CSS rule sorts the issue and everything displays at the correct size.

\o/