Как правильно реализовать подобное?

Я понимаю как сделать блок 1 и блок 2, но еще мне требуется сделать блок с изображение (оно будет прозрачным и разного размера) так, чтобы оно было поверх этих 2 блоков.
Делать через margin-top: -x px не хочется, так как размеры изображений разные и где-то может некрасиво выглядеть.
Только на чистом css.