CODEWITHSUNDEEP
cssmobilesafaribackground-position
Nick
Nick

Reputation: 293

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

I have an issue with background-position in mobile safari. It works fine on other desktop browsers, but not on iPhone or iPad.

body {
 background-color: #000000;
 background-image: url('images/background_top.png');
 background-repeat: no-repeat;
 background-position: center top;
 overflow: auto;
 padding: 0px;
 margin: 0px;
 font-family: "Arial";
}

#header {
 width: 1030px;
 height: 215px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 85px;
 background-image: url('images/header.png');
}

#main-content {
 width: 1000px;
 height: auto;
 margin-left: auto;
 margin-right: auto;
 padding-left: 15px;
 padding-right: 15px;
 padding-top: 15px;
 padding-bottom: 15px;
 background-image: url('images/content_bg.png');
 background-repeat: repeat-y;
}

#footer {
 width: 100%;
 height: 343px;
 background-image: url('images/background_bottom.png');
 background-position: center;
 background-repeat: no-repeat;
}

Both "background_top.png" and "background_bottom.png" are shifted too far to the left. I've googled around, and as far as I can tell, background-position IS supported in mobile safari. I've also tried every combination of keywords ("top", "center", etc.), px, and %. Any thoughts?

Thanks!

Update: here's the markup in the .html file, which displays the design & layout fine in other browsers: (I also updated the above css)

<html lang="en">
 <head>
  <title>Title</title>
  <link rel="Stylesheet" type="text/css" href="styles.css" />
 </head>
 <body>
  <div id="header"></div>
  <div id="main-content"></div>
  <div id="footer"></div>
 </body>
</html>

Both background images are very wide (~2000px) so as to take up space on any sized browser.

P.S. I know that there's probably a few more efficient CSS shortcuts I could be using, but for now I like having the code organized like I have it for visibility.

Upvotes: 17

Views: 57842

Answers (6)

hui-shao
hui-shao

Reputation: 31

It works when use "body:before"

body:before {
  content: ' ';
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
  background:url(/images/background.jpg);
  background-position:50% 50%;
}

Upvotes: 0

lg365
lg365

Reputation: 493

Create a wrapper ID to place in the body, then include the following CSS:

#background_wrap {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-image: url('../images/compressed/background-mobile.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
}

Just ensure that none of your content goes within the div otherwise the whole page will be fixed with no scrolling.

Upvotes: 2

norman.lol
norman.lol

Reputation: 5374

It'll work with

background-position-x: 50%;
background-position-y: 0%;

and still add

background-position: center top;

for other browsers.

Upvotes: 6

Jimbola
Jimbola

Reputation: 131

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="styles.css" />
 </head>
 <body>
  <div id="wrapper">
    <div id="header"></div>
    <div id="main-content"></div>
    <div id="footer"></div>
  </div>
 </body>
</html>

Upvotes: 11

Syntax Error
Syntax Error

Reputation: 4527

I have this problem and I'm addressing it by getting rid of my fixed footer using a separate style as mentioned here: How to target CSS for iPad but exclude Safari 4 desktop using a media query?

Upvotes: 0

Squig
Squig

Reputation: 872

Apparently, when you "scroll" on an iPhone / iPad, you're not scrolling the page in the same way as you do in a desktop browser. What you're doing is more like moving the whole page within a viewport. (I'm sure someone will correct me if I'm using the wrong terminology here.)

This means that background-position: fixed is still "supported" but has no real effect, since the whole page is moving within the viewport rather than the page content scrolling within the page.

Upvotes: 4

Related Questions