我在移动 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”都向左移动太远。我用谷歌搜索了一下，据我所知，移动Safari支持背景位置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>
两个背景图像都非常宽（~2000px），因此会占用任何大小的浏览器上的空间。
附注我知道我可能可以使用一些更有效的 CSS 快捷方式，但现在我喜欢组织代码，就像我为了可见性而组织代码一样。
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>
它将与
一起使用background-position-x: 50%;
background-position-y: 0%;
仍然添加
background-position: center top;
适用于其他浏览器。
显然，当您在 iPhone / iPad 上“滚动”时，您滚动页面的方式与在桌面浏览器中不同。您所做的更像是在视口中移动整个页面。 （我确信如果我在这里使用了错误的术语，有人会纠正我。）
这意味着background-position：fixed仍然是“受支持的”，但没有实际效果，因为整个页面在视口内移动，而不是页面内容在页面内滚动。
创建一个包装器 ID 以放置在正文中，然后包含以下 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 内，否则整个页面将被固定而不会滚动。
我遇到了这个问题，我正在通过使用单独的样式摆脱固定页脚来解决这个问题，如下所述：如何针对 iPad 定位 CSS，但使用媒体查询排除 Safari 4 桌面版？
使用“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%;
}