Как сверстать эти блоки?

Question

[OxygenMan]

Здравствуйте. В макете у меня вот так расположены блоки. Как это возможно реализовать на css? Как первых два блока расположить прямо между картинкой и белым фоном ниже? То есть, на стыке вот этих двух бэкграундов?

Comments

[Михаил]

margin в минус
либо у картинки, либо у блока с блоками

[Mesuti]

Михаил, а если картинке задать position:absolue; z-index:"меньше, чем у контента"? Или с адаптивностью будут проблемы?

[Михаил]

Mesuti, если сделаете без проблем, то будет без проблем

[OxygenMan]

Михаил, а куда помещать сами эти блоки? Ну, в самом html? Внутрь блока с картинкой-фоном или под этот блок снизу? и в чем задавать отрицательное значение? в пикселях?

[Михаил]

OxygenMan, https://codepen.io/notiv/pen/NWWVGjw

[OxygenMan]

Михаил, Спасибо большое! Все работает!

Answer 1

[Alex Pospeliri]

к блоку в котором 'крутой слоган' и сетка с элементами:
position - relative;
и дальше псевдоэлементы к нему (before, after)
position - absolute
(одному картинку вешаешь на бэкграунд, другому фон)