CSS-положение фона не работает в Mobile Safari (iPhone / iPad) - PullRequest
Новая
       18

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

17 голосов
/ 06 июля 2010

У меня проблема с background-position в мобильном сафари.Он отлично работает в других настольных браузерах, но не на 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" смещены слишком далеко влево.Я гуглил и, насколько я могу судить, background-position IS поддерживается в мобильном сафари.Я также пробовал каждую комбинацию ключевых слов ("top", "center" и т. Д.), 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 пикселей), чтобы занимать место в браузере любого размера.

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

Ответы [ 5 ]

9 голосов
/ 27 февраля 2011

Браузер iPhone / Webkit не может выравнивать по центру фоновые изображения при размещении в теге body.Единственный способ избежать этого - удалить фоновое изображение из тега body и использовать дополнительный 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>
4 голосов
/ 22 августа 2013

Будет работать с 

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

и еще добавить 

background-position: center top;

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

4 голосов
/ 06 декабря 2010

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

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

1 голос
/ 13 января 2015

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

0 голосов
/ 19 января 2011

У меня есть эта проблема, и я решаю ее, избавившись от своего фиксированного нижнего колонтитула, используя отдельный стиль, как упомянуто здесь: Как настроить таргетинг на CSS для iPad, но исключить рабочий стол Safari 4 с помощью медиазапроса?

...