Hi I am designing a site with a CSS sprite in it. It looks fine in everything except iPhones, in which the background sprites are either zoomed out, or the positioning is completely wrong. Is this a know issue with iPhones? What’s the best way to solve it?
At worst I guess I could put in a media query and use separate images instead of sprites for iPhone but would prefer to know more about the issue and solve it properly.
Pasted below is the relevant CSS.
Thanks
#site-wrapper {
border: none;
background:url(Images/Artwork.jpg) repeat-x center -420px;
}
#screen {
background:url(Images/Artwork.jpg) no-repeat top left;
width: 670px;
height: 420px;
margin: 40px 0 0 167px;
float: left;
}