CSS background-position not working in Mobile Safari (iPhone/iPad)

The iPhone/Webkit browser cannot center align background images when placed in the body tag. The only way around this is to remove the background image from your body tag and use an additional DIV as a wrapper.

#wrapper {
 background-color: #000000;
 background-image: url('images/background_top.png');
 background-repeat: no-repeat;
 background-position: center top;
 overflow: auto;

<html lang="en">
  <link rel="Stylesheet" type="text/css" href="https://stackoverflow.com/questions/3183467/styles.css" />
  <div id="wrapper">
    <div id="header"></div>
    <div id="main-content"></div>
    <div id="footer"></div>

Leave a Comment