背景重复-x带边距/填充

Question

Codepen

我有两张图片。概念图片：

高度（外部图像）将始终为773px。我希望在不拉伸图像的情况下使图像宽度为100％。所以我需要/想要使用reapeat-x。但由于内部图像需要填充/边距以适应外部图像，因此这有点问题。

所以我试过的是重复外部图像并使用:after元素复制内部图像。但我真的不喜欢这个选项，因为它在缩放时会中断。

所以我的问题是：如何更好地处理这种情况？