Question

我有一个背景图像的div，我设置background-size:cover来制作完整的宽度和高度背景图像。但它不适用于ios设备如何为ios设备设置它请帮助我

感谢

Answer 1

它应该是background-size: cover;而不是background-image。此外，您应该使用browser前缀，因为该属性是在CSS3规范¹下发布的。

body {
   background-image: url(#);
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
}

^1。 Browser Support

Answer 2

编辑 - 更新了小提琴

我有类似的问题。我通过设置背景的滚动属性来获得我的解决方案。还要确保将父容器设置为100％高度和宽度。 AdrianS的目标是将html设置为100％高度和100％宽度。

在下面的代码中，我有一个header类用于背景图像。根据需要进行调整。

在http://jsfiddle.net/Bavc_Am/7L3gD/5/

查看小提琴

如果有帮助，请提升，我是新来的。

html,
body {
  height: 100%;
  width: 100%;
}

/* Full Page Image Header Area */

.header {
  display: table;
  height: 100%;
  width: 100%;
  position: relative;
  background: url(http://placehold.it/800x800.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


/* Responsive */

@media (max-width: 768px) {

  .header {
    background: url(http://placehold.it/800x800.png) no-repeat center center scroll; 
  }
}

Answer 3

用户mkubilayk发布了真正适合我的解决方案here。救生员的财产如下：

background-attachment: scroll;

引用：

我最近遇到了类似的问题，并意识到它不是应该的   background-size：cover但background-attachment：fixed。

我通过使用iPhone的媒体查询和设置解决了这个问题   要滚动的背景附件属性。

.cover {       背景尺寸：封面;       背景附件：固定;       背景位置：中心;
@media (max-width: @iphone-screen) {
    background-attachment: scroll;
} }

Answer 4

我将提供的解决方案here。但是稍有改变。此方法经过多次测试，对于IE，它具有IE8 +支持。您可以在我提供的链接中看到完整的浏览器支持。

html {
  width: 100%;
  height: 100%;
}
body {
  background: #Fallback-color;
  background: url(../images/image.jpg) center top no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/image.jpg',sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/image.jpg', sizingMethod='scale')";
  height: 100%;
}

如何将身体背景图像设置为ios设备的封面

4 个答案: