background repeat-x with margin/padding

Codepen

I have two images that shall be one. Concept image:

The height (outer image) will be always 773px. I want to have the image with an width of 100% without stretching the image. So I need/want to use reapeat-x. But since the inner image needs an padding/margin to fit into the outer image this is a bit problematic.

So what I've tried is repeating the outer image and copying the inner image with an :after element. But I really dislike this option since it breaks when zooming.

So my question is: How can I deal better with this situation?