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