我有一个网站，我想要一个背景图像，该背景图像允许页面上的内容滚动而不移动图像。我已经研究了3天（我正在使用chrome）。我尝试了100种不同的解决方案，但最终得到了大多数人所说的配置CSS的正确方法。我尝试过的所有选项都导致了相同的问题。昨晚我终于意识到我一直遇到的问题仅在Chrome浏览器中发生。我正在运行Windows 10，并且具有所有浏览器的最新版本。 因此，这是IE，Edge，Firefox中页面外观的图像……这些都是正确的。 好吧，我尝试上传图像，但是IMGUR不允许我这样做，这可能会使我很难解释。 首先，我要说的是html的代码段：
<div class="dashboard-background">
... other divs inside this one
</div>
这是仪表板背景的CSS：
.dashboard-background {
height: 100vh;
width: 100%;
background-color: #0a568c;
background-image: url("/images/full-bkg.png");
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: right; /* I've tried cover also */
}
顺便说一句，我知道我不需要背景色，但是我添加了它来帮助调试。所以这就是问题所在：除了chrome之外，所有浏览器都将图像填充到div中，并按应有的方式正确对齐，并且div中的数据就像我想要的那样滚动。但是，使用Chrome时，div的位置和大小正确，但是背景图像向左推了250px，从而暴露了我在CSS中设置的蓝色背景颜色。
在这里很难看到图片而难以解释。整个站点都有侧面导航菜单。只要浏览器窗口的宽度至少为768px，侧面菜单将保持打开/可见状态。因此，对于移动设备，如果浏览器的宽度小于768像素，则侧面菜单将关闭。然后，页面顶部有3个栏（按钮）以打开菜单，就像许多移动应用程序的工作方式一样。 因此，我发现由于某些未知原因，我试图在div中修复的背景图像受到侧面菜单的影响。如果我缩小浏览器窗口以关闭侧面菜单，则背景图像将向右滑动至应有的位置。如果然后单击顶部的3栏按钮，则随着菜单向右滑动以打开，背景图像以与侧菜单相同的速度向左滑动相同的距离。如果我随后关闭菜单，则背景图像应向后滑动。很明显，这是造成这种情况的原因，但是html距离太远，没有任何意义，并且侧面菜单似乎不会影响整个网站中的其他任何内容。
会有很多html和css尝试显示所有侧边菜单，但是我要记住，这在所有其他浏览器中都可以正常工作，所以我希望有人知道任何已知的形式Chrome可能会影响背景图片的问题。还请记住，并不是div在移动，如果我使用chrome来“检查” div，则它显示在正确的位置，蓝色显示它在正确的位置。它似乎只影响div中背景图片的位置。 任何帮助将不胜感激。
更新：我找到了罪魁祸首，但我仍然不知道如何解决它或为什么它会影响背景图像。以下CSS适用于div，该div环绕页面上除使用侧菜单外的所有内容，以便在打开侧菜单（宽度为250px）时页面上的所有内容将向右推250，因此不会被覆盖在侧面菜单上。 除非浏览器非常小（如在移动设备上），否则菜单将在页面内容上方滑动，这都是正确的，并且一切正常。
@media (max-width: 767px) {
#app-container.push-right #sidenav ~ #body-container {
left: 250px;
}
}
因此，如果我注释掉上述CSS，则chrome中的背景图片将按照预期的方式工作。但是，页面的其余内容现在没有被向右推，因此被侧边菜单掩盖了。所以我必须离开CSS，因为它是正确的。在我看来，这听起来像是Chrome中的错误，但我不知道如何创建解决方法。
这项工作吗？
@media (max-width: 767px) {
.dashboard-background {
/* for chrome browser only shift background-image */
/* to the right by 250px; */
}
}
如果有人可以告诉我如何仅使用Chrome浏览器CSS以及如何将背景图片移动250像素，那么我可以解决它。