CSS背景位置不能在移动Safari（iPhone / iPad） [英] CSS background-position not working in Mobile Safari (iPhone/iPad)
问题描述
我在移动safari中遇到了background-position的问题。
I have an issue with background-position in mobile safari. It works fine on other desktop browsers, but not on iPhone or 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。我也尝试过关键字（top，center等），px和％的每个组合。任何想法？
Both "background_top.png" and "background_bottom.png" are shifted too far to the left. I've googled around, and as far as I can tell, background-position IS supported in mobile safari. I've also tried every combination of keywords ("top", "center", etc.), px, and %. Any thoughts?
谢谢！
更新：这里是.html文件中的标记， &在其他浏览器中的布局好：（我也更新了上面的css）
Update: here's the markup in the .html file, which displays the design & layout fine in other browsers: (I also updated the above 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），以便占用任何大小的浏览器的空间。
Both background images are very wide (~2000px) so as to take up space on any sized browser.
PS我知道可能有一些更高效的CSS快捷键我可以使用，但现在我喜欢有组织的代码，因为我有它的可见性。
P.S. I know that there's probably a few more efficient CSS shortcuts I could be using, but for now I like having the code organized like I have it for visibility.
推荐答案
当放置在body标签中时，iPhone / Webkit浏览器无法居中对齐背景图片。唯一的方法是从你的body标签中删除背景图片，并使用额外的DIV作为包装器。
The iPhone/Webkit browser cannot center align background images when placed in the body tag. The only way around this is to remove the background image from your body tag and use an additional DIV as a wrapper.
#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>
这篇关于CSS背景位置不能在移动Safari（iPhone / iPad）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
