Если я правильно вас понял, то вы хотите картинку фона :
Обрезать по контурам картинки розовой волны:

Я покажу технику с помощью которой вы довольно легко сможете сделать это.
При этом блок будет полностью адаптивный и вы сможете его вставить в любой контейнер, любого приложения.
Чтобы получить контуры обрезки розовой волны необходимо получить
path
контура.
Для этого пишем небольшой файл svg, чтобы добавить его в векторный
редактор. Картинка розовой волны имеет габариты 1331 х 546px
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1331" height="546" viewBox="0 0 1331 546" preserveAspectRatio="xMinYMin meet" >
<image xlink:href="https://i.stack.imgur.com/Ivqf1.png" width="100%" height="100%" />
</svg>
- Открываем этот файл с помощью векторного редактора
С помощью инструмента Рисовать кривые Безье
наносим по контуру узловые точки
Инструментом Редактировать узлы контура
выделяем узлы (они становятся цветными)
Делаем узлы Автоматически сглаженными (цифра 3 на рисунке)
Рычагами управления узлов добиваемся максимального совпадения контуров с заданной формой
Сохраняем файл *.svg
Забираем path
Ниже контуры этого патча, по этим контурам будет сделана обрезка с помощью clip-path
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1331" height="546" viewBox="0 0 1331 546" preserveAspectRatio="xMinYMin meet" border="1">
<path d="m0 67.2c0 0 233.3-28.6 350.6-29.2 134-0.7 267.3 19.1 400.9 29.2 82.8 6.3 165.4 15.4 248.3 19.5 54.1 2.7 108.2 2.7 162.3 3.2 56.3 0.6 168.8 0 168.8 0v415.5c0 0-147.2 0.7-220.8 0-55.7-0.5-111.5-0.8-167.2-3.2-63.4-2.8-126.6-9.2-189.9-13-74.6-4.4-149.3-8.7-224-11.4-75.7-2.7-151.5-6.1-227.2-4.9C201.1 474.6 0 489.2 0 489.2Z" style="fill:none;stroke:#000"/>
<image xlink:href="https://i.stack.imgur.com/O4W28.png" height="100%" width="100%"/>
</svg>
- Теперь полученный контур добавляем в команду
clip-path
и обрезаем с
помощью него фоновую картинку
.container {
width:100%;
height:100%;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 1331 546" preserveAspectRatio="xMinYMin meet" border="1">
<defs>
<clipPath id="cp1">
<path d="m0 67.2c0 0 233.3-28.6 350.6-29.2 134-0.7 267.3 19.1 400.9 29.2 82.8 6.3 165.4 15.4 248.3 19.5 54.1 2.7 108.2 2.7 162.3 3.2 56.3 0.6 168.8 0 168.8 0v415.5c0 0-147.2 0.7-220.8 0-55.7-0.5-111.5-0.8-167.2-3.2-63.4-2.8-126.6-9.2-189.9-13-74.6-4.4-149.3-8.7-224-11.4-75.7-2.7-151.5-6.1-227.2-4.9C201.1 474.6 0 489.2 0 489.2Z" style="fill:none;stroke:#000"/>
</clipPath>
</defs>
<path d="m0 67.2c0 0 233.3-28.6 350.6-29.2 134-0.7 267.3 19.1 400.9 29.2 82.8 6.3 165.4 15.4 248.3 19.5 54.1 2.7 108.2 2.7 162.3 3.2 56.3 0.6 168.8 0 168.8 0v415.5c0 0-147.2 0.7-220.8 0-55.7-0.5-111.5-0.8-167.2-3.2-63.4-2.8-126.6-9.2-189.9-13-74.6-4.4-149.3-8.7-224-11.4-75.7-2.7-151.5-6.1-227.2-4.9C201.1 474.6 0 489.2 0 489.2Z" style="fill:#F783AC;stroke:none"/>
<image xlink:href="https://i.stack.imgur.com/O4W28.png" height="100%" width="100%" clip-path="url(#cp1)"/>
</svg>
</div>
Получился полностью адаптивный блок, который работает во всех браузерах, включая IE
Edge
Можно менять начальные размеры блока изменяя проценты ширины и высоты контейнера.