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

Question

[gafokop726]

Вопрос в том, как правильно сверстать эти два блока (фоновый и тот, что на переднем плане). Чтобы второй всегда начинался ровно с середины первого, и мне не приходилось подстраивать верстку под каждое разрешение (все, что меняется с расширением - высота фонового блока).

Возможно, у этого стиля есть какое-то название, вижу уже не в первый раз. Не знаю, по какой фразе гуглить

Comments

[Ankhena]

Про ровно середину забудьте. Ведь нет гарантии, что в меню будет ровно столько пунктов, сколько нарисовано дизайнером.

Вариантов несколько.

1. Верстаете меню с фоном. Отдельным блоком верстаете то, что дальше. Задаете в качестве фона градиент на ту высоту которую вам нужно.

2. Меню с фоном и большим нижним паддингом. Второму блоку задаете верхний отрицательный margin и "наползаете" им на верхний блок.

Если всё таки хотите попадать в середину, то вам помогут js и кастомные свойства css.
Либо гридами.

Что именно не получается?