Header background image cut off on iPhone and iPad despite using repeat-x

I was having a problem where the background image of the header of this website wasn't being displayed properly on an iPhone or iPad. Even though I had the "repeat-x" setting set on my background image, the iPhone and iPad were still showing the image cut off on the right side, leaving an ugly block of white space over there.

To solve the problem you have to use an iPhone and iPad specific viewport setting in your HTML:

<meta name="viewport" content="width=1500" />

Just put that setting in the <head> section of your web page(s) to solve the problem. You'll have to experiment with the width setting there to see what looks best with your website and the latest, greatest iPhone and iPad devices, but that setting seems okay for the iPhone and iPad devices I have to test with in early 2012.

You can find more information about this at this crazy link on the Apple website.