BLOG - A TECHNICAL RESOURCE


Background shift with iPad and iPhone – Centering Problems

A web developers top frustration is achieving cross browser compatibility.  I expect to have issues with old versions of IE, but when I have problems with new browsers, I get down right frustrated.

The Safari Web Kit for iPad and iPhone can cause display issues with background images set inside the BODY tag.  For example, something like this:

body {
background:url(../images/bg.jpg) repeat-y top center;
background-color:#620e0e;
}

If you are having background problems on iPhone or iPad, either shifting or simply not centering correctly, then this is usually because you don’t have the viewport size defined.  Simply plug in the container or wrapper size of your website into this string and add to the HEAD of your website and your background centering or background shift should be fixed for iPad and iPhone.

<head>
 <meta name="viewport" content="width=1100" />
</head> 
Related Posts Plugin for WordPress, Blogger...
This entry was posted in Browser Fixes, Code, css and tagged , , , . Bookmark the permalink.

Comments are closed.


facebook twitter

Subscription Options


RSS

Subscribe by email: