Как сделать блок с вырезом / как сделать один фон у родителя и псевдоэлемента?

Question

[Dymok]

Собсна в макете есть вот такой блок:

Нужно сверстать его так, чтобы и на основной части, и на нижнем "вырезе" было одно и то же фоновое изображение
Максимум, что получилось сделать -

Не могу понять, как сделать одно изображение на блок-родитель и на псевдоэлемент..

Comments

[Александр Шемаханов]

Вероятно, вам стоит покопать в сторону clip-path
Все что нужно нарисовать нужную фигуру в SVG, вставить изображение, обрезать его по фигуре с помощью clip-path

Answer 1

[Владимир Проскурин]

Не надо clip-path. Просто установите картинку для обоих блоков, и просто выровняйте картинку второго блока.
Ну вот пример. Я тут задаю
background-position: -20px -50px;
где -20px это отступ по горизонтале, т.к. блок не смещается влево-право, пишем туда величину из padding родителя. А -50px это тот же самый padding 20px, плюс смещение блока вниз 30px.

Answer 2

[Александр Шемаханов]

Владимир Проскурин прав, но можно добавить резины и привязаться к ширине окна браузера, в таком случае кроме background-position: top center, нужно еще и background-size указать, равный ширине хэдера