我在移动Safari中有一个背景位置的问题。它在其他桌面浏览器上工作正常，但不能在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”都向左移动太远。我已经google了，据我所知，在移动Safari中支持背景位置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像素)，以便在任何尺寸的浏览器上占用空间。
附：我知道可能有一些更有效的CSS快捷方式可以使用，但是现在我喜欢将代码组织起来，就像我有可见性一样。
解决方法
当放置在正文标签中时，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>
