在移动设备上扭曲的背景图像

Question

所以我看到其他人发布了类似的问题并且我已经尝试了他们的解决方案，但没有一个能够奏效。

在桌面上，标题背景图片完美运行。即使我将窗口调整为移动大小的窗口，它也可以工作。但是当我将它加载到实际的移动设备上时，背景图像不会显示出来。我发现如果删除background-position: center center;，背景图片会显示在移动设备上，但会失真。

所以，我的问题是：如何让背景图像显示在手机上而不会让它看起来扭曲。

我所讨论的header容器的CSS是：

header {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-image: url(../img/header-background.jpg);
    position: relative;
}

您可以在http://coledavidson103.github.io/davidsoncreative/找到它。

同样，问题只出现在移动设备上。当我使用Inspector模拟移动设备时，它甚至不会发生。

提前致谢！

编辑：

以下是我添加background-position: center center时问题的屏幕截图。您会注意到图片没有显示出来。

以下是未包含background-position问题的屏幕截图。您会注意到图像失真。

Answer 1

将background-size: cover更改为background-size:100% 100%。