способ верстки волнистого фона. сложный фон

Пытаюсь представить способы и пути решения верстки подобного шаблона:

Подскажите, где почитать, как сделать такой фон не целой картинкой. Интересно и отдельные белые частицы и наклонные волнистые линии.

Ответ
Один из возможных вариантов решения
Как я понял, нужно, чтобы и фон был, как на картинке, плюс и адаптивным был, и была бы возможность совместить его с вёрсткой меню, иконок-ссылок и т.д
Идеальный вариант,- это иметь хорошего, знающего дизайнера, который понимает технику вёрстки и предоставил бы вам векторный фон, без надписей, картинок иконок, текста. И плюс к этому картинку конечного результата. Но имеем, что имеем и учимся работать с дизайнером, то есть требовать от него, что написано выше.
Придется делать работу за дизайнера. Изогнутые линии будем рисовать в векторном редакторе.
Последовательность действий:
Открываем вашу картинку в векторном редакторе С помощью инструмента наносим узловые точки на кривые линии

Выделяем узловые точки - и делаем их автоматически закругленными -- С помощью рычагов узловых точек, подгоняем нашу кривую к существующей на картинке Сохраняем файл в формате *.svg Забираем патчи кривых из файла Добавляем цвет в криволинейные области Вместо круглой картинки слайдера добавляем окружность, для того чтобы вы в дальнейшем могли добавить на это место рабочий слайдер поверх фона

Ниже полный код векторного, адаптивного фона:














Вёрстка
Сейчас у нас одновременно совмещены векторный фон, плюс картинка из вопроса автора. Я конечно не буду делать полную вёрстку, лишь начну её.
Автор вопроса сделает вёрстку, как ему нравится. Сейчас надо просто определиться, как связать векторный фон с остальными элементами.
Так как фон занимает всё пространство, то html элементы будут выше на слой z-index:1 и абсолютно спозиционированы, чтобы попасть в нужное место. Блок, с svg кодом будет - position:relative блок с html - position:absolute
В примере верстки добавляются лишь два слова Интересный Ресторан
Зеленая рамка показывает границы блока html.
Когда закончите вёрстку уберите из svg блока строчку добавляющую png фон.



.container{
position:relative
width:100%
height:100%
}
.menuSite {
width:30%
height:60%
position:absolute
z-index:1
top:20%
left:16%
padding-left:1em
padding-top:-1.5em
outline:1px solid green
}
.p1{
font-size:2em
color:#B1CFDC
}
.p2{
font-size:1.3em
color:#D5B2C2
}