Html 如何在指定的网格列中定位背景？

我有一个两列的网格。在右边的一栏中，我尝试在滚动时实现视差背景效果，但由于某些原因，背景看起来像是从屏幕中间居中。如何定位背景，使其仅位于右栏的网格内

标题{
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景：灰色；
}
身体{
高度：10000px
}
.导航链接{
填充：0 25px；
}
#标志{
宽度：5%；
身高：5%；
}
/*.集装箱
{
显示：网格；
网格模板列：[内容]最小值（0，1fr）[图像]最小值（0，1fr）；
}*/
.集装箱{
显示：网格；
网格模板列：[content]1fr[图像]1fr
}
.内容{
网格列：内容；
背景：蓝色；
}
#l-飞溅{}
.图像{
网格列：图像；
背景：黄色；
}
.间距{
高度：100px；
}
.图像块{
宽度：400px；
高度：200px；
保证金：0自动；
}
#r-splash{}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它有
不仅存活了五个世纪，而且飞跃到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着desktop的发布而流行
发布软件，如Aldus PageMaker，包括Lorem Ipsum版本。

使用固定密码时

背景相对于视口是固定的。即使元素具有滚动机制，背景也不会随元素移动

在这种情况下，您需要调整位置/大小，使其位于右侧。基本上，图像需要位于屏幕后半部分的中心，即

75%

，但我们必须将图像的中心置于

75%

上，因此我们添加了

25%

其宽度（

400px

在

背景大小中定义，等于容器宽度）。然后我们把它放在顶部的
100px
，这将使我们得到
calc（75%+100px）100px/400px自动


标题{
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景：灰色；
}
身体{
高度：200vh；
}
.导航链接{
填充：0 25px；
}
#标志{
宽度：5%；
身高：5%；
}
.集装箱{
显示：网格；
网格模板列：[content]1fr[图像]1fr
}
.内容{
网格列：内容；
背景：蓝色；
}
.图像{
网格列：图像；
背景：黄色；
}
.间距{
高度：100px；
}
.图像块{
宽度：400px；
高度：200px；
裕度：100px自动0；
背景：url(http://placekitten.com/1543/1024)计算（75%+100px）100px/400px自动固定无重复；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它有
不仅存活了五个世纪，而且飞跃到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着desktop的发布而流行
发布软件，如Aldus PageMaker，包括Lorem Ipsum版本。
Hi。谢谢你花时间帮忙。我实现了您的更改，并注意到您可以看到背景的图像框在滚动时实际上改变了大小？有没有一种方法可以防止它在滚动时膨胀？如果你看这个例子，你可以看到的窗口的图像背景保持不变的大小。你知道为什么在我右边的网格列中查看图像背景的窗口会被修改吗？@Trav增加背景大小，试试这个
url(http://placekitten.com/1543/1024)calc（75%+200px）100px/800px自动修复无重复
不幸的是，修改无效。.image块在滚动时仍在更改大小。目标是使.image块在保持背景不变的情况下保持不变fixed@Trav图像块是恒定的，请向其添加边框以引起注意。。问题是运动图像。。。因为它是固定的，你想把它放在中间，所以当你滚动时它会被剪切，因为它是固定的