CSS背景图像显示在手机上看起来与调整浏览器大小时不同

Question

我使用的是Wordpress-Zerif-Lite模板，手机上的背景图像显示有问题。我花了一些时间来完善图像的位置，这样当浏览器调整为手机大小时，它看起来很好，但在手机上测试时，它完全不同。为什么它在手机上看起来不一样？有人能帮忙吗？

.header-content-wrap {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: right top !important;
    background: rgba(0, 0, 0, 0.5);
    position: relative;
    -webkit-box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
    box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
    padding: 285px 0 210px;
}

请看下面的屏幕截图：

手机：

**链接已删除，现在已解决。

调整大小的web浏览器：

**链接已删除，现在已解决。

Answer 1

检查背景位置：。看起来它使用的是right top，但也许你只是想要center。如果不同，那么您可能使用媒体查询，这就是为什么它们可能根据屏幕宽度具有不同的位置。

更新

图像将作为背景应用于身体。在iPhone6上，背景是375像素x 11267像素。它看起来很有趣，因为你是基于一个夸张的垂直使用背景缩放：封面。如果你想解决这个问题，当你的屏幕比例变得如此疯狂时，你需要隐藏背景图像。我知道你这样做是因为你想要一个固定的位置，但附着在身体上没有帮助。您可以制作一个固定位置的div，它是视口宽度和高度的100%，以便在背景中获得相同的效果。