I've noticed that my website, which appears as intended on all desktop browsers I've tested, suffers from a puzzling background image positioning issue on iPhone, iPod touch, and iPad.
I've been working with this sample page:
http://www.thewind-up.com/music_new2.html
Here is a screenshot on regular Safari:
Here is a screenshot from Mobile Safari on an iPad:
Here is the relevant portion of the stylesheet:
Code:
body {
margin: 0;
padding: 0;
border: none;
background-image: url(images/banner_bg_lite.png);
background-position: top center;
background-repeat: no-repeat;
background-color: #FFF;
background-attachment: scroll;
}
Any ideas? Site still functions, but this bug is totally breaking the visual style, and I can't seem to figure out what's causing it.