CSS-исходное положение не работает в Mobile Safari (iPhone/iPad)

У меня проблема с фоновым положением в мобильном сафари. Он отлично работает на других настольных браузерах, но не на iPhone или 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;
}

Оба "background_top.png" и "background_bottom.png" смещены слишком далеко влево. Я искал googled, и, насколько я могу судить, в мобильном сафари поддерживается фоновое положение IS. Я также пробовал каждую комбинацию ключевых слов ( "верх", "центр" и т.д.), Px и%. Любые мысли?

Спасибо!

Обновление: здесь разметка в файле .html, которая отлично отображает дизайн и макет в других браузерах: (Я также обновил выше 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>

Оба фоновых изображения очень широкие (~ 2000 пикселей), чтобы занимать место на любом браузере размера.

P.S. Я знаю, что, возможно, есть несколько более эффективных ярлыков CSS, которые я мог бы использовать, но пока мне нравится, что код организован так, как будто у меня есть его для видимости.

Ответы

Ответ 1

Браузер iPhone/Webkit не может центрировать фоновые изображения при размещении в теге тела. Единственный способ обойти это - удалить фоновое изображение из тега тела и использовать дополнительный DIV в качестве обертки.

#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>

Ответ 2

По-видимому, когда вы "прокручиваете" на iPhone/iPad, вы не прокручиваете страницу так же, как в браузере рабочего стола. То, что вы делаете, больше похоже на перемещение всей страницы в окне просмотра. (Я уверен, что кто-то меня исправит, если я использую неправильную терминологию здесь.)

Это означает, что background-position: fixed по-прежнему "поддерживается", но не имеет реального эффекта, поскольку вся страница перемещается внутри области просмотра, а не прокручивается содержимое страницы на странице.

Ответ 3

Он будет работать с

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

и добавьте

background-position: center top;

для других браузеров.

Ответ 4

Создайте идентификатор обертки для размещения в теле, затем включите следующий 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;
}

Просто убедитесь, что ни один из ваших материалов не попадет в div, иначе вся страница будет исправлена ​​без прокрутки.

Ответ 6

Эй, у меня есть проблема на iphone http://lagreze.com.ar/1/

Это мой веб-сайт, если вы посмотрите на Chrome, вы увидите, что каждый div идеален с фоном, но на iphone и safari некоторые div плохие, другие хорошие. и все было сделано =. Так что я не знаю, в чем проблема. Кто-нибудь может мне помочь?