防止铬在使用背景位置时切断车身上的背景图像

Question

我在这个页面的主体标签上有一张纸飞机的背景图片：http://cogo.goodfolk.co.nz。它的尖端正在被切断--如果你调整浏览器窗口的大小，完整的图像就会弹出。

它只发生在Chrome上，而且不一致，如果您有时刷新，甚至悬停有时它是好的。如果我删除所有的背景样式(背景位置和不重复)，那么整个图像在那里-但当然没有正确的定位。它也发生在我的其他网页的网站(如http://cogo.goodfolk.co.nz/online-surveying)。

经过几天的调试/搜索，我找不到任何与这个问题相关的东西和/或修复它--它是否可能是一个具有背景位置的Chrome bug？

有什么想法或解决办法吗？谢谢!

//EDITED//相关代码粘贴在下面，尽管很明显这是非常标准的，所以必须是站点中的其他东西导致了问题：

.home {
   background: url("../img/airplane.jpg") no-repeat center; 
   background-size: 70%;
   background-position: 10% 98%;
}

Answer 1

感谢每一个提出建议的人，幸运的是我找到了一个解决办法！我设法使背景样式保持不变，并将所有内容放在body标记的伪元素之前。如果您感兴趣，可以在cogo.goodfolk.co.nz上查看更新的代码，或者粘贴在这里：

.home {
   position: relative;
   min-height: 860px;
}
.home:before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   background: url("../img/airplane.jpg") no-repeat center;
   background-size: 70%;
   background-position: 50% 15%;
}

Answer 2

背景图像被设置为center，因此这是预期的行为，取决于窗口大小。您可以从以下位置更改此CSS声明：

.home {
    background: url("../img/airplane.jpg") no-repeat center;
    background-size: 70%;
}

至：

.home {
    background: url("../img/airplane.jpg") no-repeat center top;
    background-size: 70%;
}

这将锚定图像到屏幕顶部，这意味着它不会剪辑，但这可能不是你想要的行为。

更复杂的是，你也有这个问题，这可能是造成问题的原因之一。我建议把它完全删除：

@media (min-width: 1200px)
.home {
    background-position: 20% -10%;
}

Answer 3

将显示设置为“内联表”。