移动设备上的背景图片不能正确适应屏幕。

Question

我正在遇到网站问题，请耐心等待，页面是法语的，但幸运的是所有语言的代码都是相同的。我使用三星Galaxy S5查看页面，顶部有一个大黑框。您可以在此处查看原始页面here。您可以在桌面上查看一切正常。现在这就是我在Galaxy S5上遇到的情况（对于大图片很抱歉，不知道如何在Stack Overflow上缩小它）。

在任何电脑或iPhone/iPad上的浏览器中都可以，但在我的Galaxy S5上，背景图像显示在底部，顶部有一个黑色条。

现在我目前拥有的代码在台式机/iPad/iPhone上运行良好：

 body{
    margin:0; 
    padding:0; 
    font-size:13px; 
    font-family:"Arial Black", Gadget, sans-serif; 
    color:#FFFFFF;
    background-image: url('http://www.impotsuzannedelorme.com/images/cloud.jpg'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover; 
}

我不确定自己缺少什么，如果有CSS专家能帮忙，我将非常感激。

- Alexandre

Answer 1

background-attachment:fixed在移动版chrome浏览器（版本47）中尚未支持，并且可能会干扰background-size:cover（该功能已得到支持）。请查看http://caniuse.com/#feat=background-attachment。

此外，在某些IOS Safari版本中，这两个功能的组合（大小覆盖+固定附加）已知会造成伪影（见http://caniuse.com/#search=background-size，选项卡“已知问题”）。可能它甚至不能在iPad 2上正常工作，而对于iPad 1肯定不行。

这样说来，您有几个选项可以拥有一个固定的背景和滚动内容：

• 使用

  用于背景和用于内容的滚动

  ，就像这样：https://jsfiddle.net/6r3pobys/2/

• 像目前一样在中使用图像与background-size:cover，删除background-attachment:fixed并使用前面一点中的滚动

  。请注意，在这种情况下，您还需要将HTML元素设置为height:100%！就像这样：https://jsfiddle.net/s22qsg55/2/

可以在此处查看最新方法的网页：https://jsfiddle.net/t9kpgjqr/2/。我创建了包含您的主体片段和页脚的

supercontainer

。

- rupps

---

非常感谢！我今天会尝试一下！我知道我需要一个大师级人物，而你肯定就是其中一个！我会尽快奖励你的（它说从现在开始6小时后 :)）。 - Alexandre

哈哈，比起大师，我只是几周前也曾遇到同样的问题而已 :) - rupps

Answer 2

background-repeat:no-repeat;
background-size:auto;

如果你使用这段代码，它应该可以工作。

请确认这个答案对于悬赏是正确的。

- Josh Hobbs

Answer 3

尝试：

background-size: contain;
background-position: center;
background-repeat: no-repeat; 

提供更清晰的结果。 我使用一个接受图像宽度作为参数的网络服务，并返回一个正确大小的元素图像。

- tnt-rox

Answer 4

你尝试设置导航栏的最大高度了吗？导航栏除了导航之外还有其他的内容吗？如果是这样，那么在其中放置的任何其他内容可能会将它向下推。

提供一些HTML/CSS代码会很有帮助！

希望这可以帮到你！

- Emmet Arries