How to make a responsive background-image?

Question

HTML

Hello. Please help me solve the following problem. Container has background-image and background-color applied. Inside this container there is a block filled with background-color and an image is inserted in it. The problem is that at different resolutions, the block moves and overlaps the background-image, which is not very beautiful. The screenshots clearly show this.
On the 1st screenshot, the display is correct.

On the 2nd screenshot, there is a defect when changing the screen resolution.

Answer 1

If a character font is connected? Then you can still change the color of the pictures.
1) Make images a character font (or svg with shadow filter) then applied text-shadow with background color will give a smooth transition.
2) Wrap the image block in a div and apply box-shadow to it with the background color. But the shadow will be on all 4 sides.
3) Fill the block with this gradient. but then you need to stretch the block with pictures by 100% in height.
https://jsfiddle.net/942r6udd/1/