CSS背景-移动设备上损坏的大小
CSS背景-移动设备上损坏的大小
提问于 2013-07-28 03:01:29
我正在构建一个带有header元素的站点，该元素具有固定的全屏背景图像。它完全按照预期工作，除了在移动设备上。我的iphone/ipad上的Safari和Chrome都不能正确显示它--它似乎缩放到比标题元素大得多的尺寸。
完整的站点在这里：http://www.loganmerriam.com/
以及相关的css：
header {
background: url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}即使我使用媒体查询来加载一个小得多的背景，它仍然只显示图像的一小部分缩放。
另外，有没有人可以给我介绍一个在idevices上检查CSS的好方法？
回答 2
Stack Overflow用户
发布于 2013-07-28 03:11:24
不确定这是否会有很大帮助，但http://screenqueri.es/index.php可能会有帮助。
Stack Overflow用户
发布于 2013-07-28 03:17:37
这是因为你的样式被覆盖了。删除background-size: cover;
header {
background: url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
-webkit-background-size: cover; // remove this
-moz-background-size: cover; // remove this
-o-background-size: cover; // remove this
background-size: cover; // remove this
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17901387
复制相关文章
相似问题
腾讯云开发者
