将固定背景与CSS calc对齐

我希望我的尝试不是不可能的

首先让我解释一下：我有一个响应性设计，在某些情况下（媒体查询块），需要固定背景。所讨论的设计是这样的：

基本上有两个媒体查询：一个用于最大高度，另一个用于最小宽度。如果有足够的视口高度，则内容区域中会有一个滚动条，并且设计高度是固定的。但是，如果视口不够大，无法显示预定义的高度，则height mediaquery将从内部div中删除滚动条，这样就不会有两个嵌套的滚动容器（body+div），并将内容区域设置为height:auto

如果视口太窄，也会有一个响应媒体查询，但这是完美的

现在问题来了：当设计切换到整个页面滚动的模式（低于830像素的高度）时，我想将图像定位在正确的容器“固定”中，这样它就不会滚动出视口。但是问题出现了，我不能真正将背景相对于容器div定位，因为“固定”将背景图像相对于视口定位。我在这里创建了一个CSS小提琴：

如果更改宽度，您会注意到问题。我想让图像的右边框与绿色框的右边框对齐

---

这有可能吗？我使用calc（）没有问题，因为如果检测到旧的浏览器，我的CMS中将有一个条件，即使用普通的老式设计。

我现在自己解决了这个问题。抱歉发帖了

诀窍是：由于我的设计以中心为中心，我开始尝试使用calc（50%+somepixelvalue）。这就成功了

我调整了CSS操场：

---

现在，图像始终与绿色区域的右边框对齐。缩放时，有时会出现1像素的差异，但这并不重要，因为背景会被指定给某个充当掩码的容器元素。

我认为您发布了错误的cssdesk链接。。这是默认的网站页面谢谢。我将链接设置为一个工作CSS游乐场。无论如何，这个cssdesk在开始时没有正常工作。