CSS：背景位置提供的中心位置

Question

我试图将其设置在容器背景图像的中心。但是背景图像的中心应为点25％25％。 这是参考图像，每个色点距边缘25％：

我正在尝试将此图像放置在容器中，其中红点将位于该容器的中心。容器的尺寸未知。

这样做

.container {
  background-image: url("src/reference.jpg");
  background-size: cover;
  background-position: 25% 25%;
}

我最终将红点定位在容器的位置（25％，25％）：

如何编写css以使该图像始终覆盖.container，并在<{1}}的中心强制红点？我只在寻找纯CSS解决方案。

此示例的代码和框：https://codesandbox.io/s/adoring-frog-tfqv3