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

by

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">
 <head>
  <title>Title</title>
  <link rel="Stylesheet" type="text/css" href="https://stackoverflow.com/questions/3183467/styles.css" />
 </head>
 <body>
  <div id="wrapper">
    <div id="header"></div>
    <div id="main-content"></div>
    <div id="footer"></div>
  </div>
 </body>
</html>

More Related Contents:

  1. Media Queries: How to target desktop, tablet, and mobile?
  2. Using percentage values with background-position on a linear-gradient
  3. How can I force WebKit to redraw/repaint to propagate style changes?
  4. Common breakpoints for media queries on a responsive site
  5. Is background-position-x (background-position-y) a standard W3C CSS property?
  6. CSS3 animation not working in safari
  7. :not() selector not behaving the same between Safari and Chrome/Firefox
  8. Does css hover work on mobile devices?
  9. @Media min-width & max-width
  10. Is there a CSS hack to affect Safari only NOT Chrome?
  11. Bootstrap 3 – desktop view on a mobile device
  12. Webkit bug with `:hover` and multiple adjacent-sibling selectors
  13. Bootstrap 3 Slide in Menu / Navbar on Mobile [closed]
  14. How to force re-render after a WebKit 3D transform in Safari
  15. Which are the most important media queries to use in creating mobile responsive design?
  16. How can I remove the gloss on a select element in Safari on Mac?
  17. Bug in CSS3 rotateY transition on Safari?
  18. Is there a way to apply styles to Safari only?
  19. How to detect if the OS is in dark mode in browsers?
  20. Some font-size’s rendered larger on Safari (iPhone)
  21. Safari/Chrome (Webkit) – Cannot hide iframe vertical scrollbar
  22. How to make radial gradients work in Safari?
  23. Font weight turns lighter on Mac/Safari
  24. iOS 7 iPad Safari Landscape innerHeight/outerHeight layout issue
  25. WebKit CSS content Unicode bug?
  26. Chrome & Safari Error::Not allowed to load local resource: file:///D:/CSS/Style.css
  27. Row Wrap in flex-box not wrapping in Safari
  28. Google Font not working on Safari
  29. Why is filter(drop-shadow) causing my SVG to disappear in Safari?
  30. (Really) Long Background Image Does Not Render on iPad Safari

Leave a Comment