Как сверстать следующие блоки?

Question

[Kostylev2021]

Здравствуйте.
Как бы вы сверстали следующие изображения?


Интересует то как сверстать лепестки между блоками, пиццу ,тарелку.
Если высоту в первом блоке в первой картинке задать в 100vh то при размещении картинок с помощью transform при уменьшении высоты экрана они будут налезать на вторую секцию .
Поэтому я думаю нужно указывать высоту либо в 1000 px либо 100%.(скорей 100%).
Но если лепестки выводить как одну картинку и без position absolute то появляется пустое пространство с низу .(при задании координат картинки с помощью transform).
Если вы знаете как сверстать правильней или есть видео где что то подобное верстают дайте знать .

Comments

[Ankhena]

Фонами.
Листики фонами псевдоэлемента, чтобы выпирали из блока. Альтернатива: разрезать и задать фонами двух блоков.
Пицца - фон псевдоэлемента.

[Kostylev2021]

Ankhena, А как задать псевдоэлементу ,то есть контейнеру первого блока задний фон. Пытаюсь через after для контейнера ничего не выводит .

.firstsection::after {
    content: "";
    background-image: url(img/free.png); 
}

[Ankhena]

Kostylev2021, угу, у элементов с размерами 0х0 фона не видно...

[Kostylev2021]

Ankhena,размер тоже задаю и все равно не видно

[Сергей delphinpro]

Kostylev2021, псевдоэлемент по умолчанию строчный. Для строчных элементов бесполезно задавать размер.

(Самое время открыть для себя средства разработчика в браузере, и увидеть реальные размеры вашего элемента)

[Kostylev2021]

Сергей delphinpro, спасибо