Как правильно задать background с помощью маски svg?

Question

[Evtera]

Здравствуйте. Есть такой блок
Фиолетвый фон есть в svg. Как задать правильный задний фон, чтобы при масштабировании экрана волна не плавала? то есть, можно её как-то зафиксировать, чтобы она подстраивалась только по высоте родителя?

Сейчас проблема в следующем. При сужении экрана данный задний фон начинает "плавать" и съезжает

Comments

[Rustam Bainazarov]

Верхняя и нижняя грани — волны SVG (можно на :before и :after), по середине — цветной фон. Можно сразу SVG-картинкой на absolute. Только нужно не забыть в SVG добавить атрибут preserveAspectRatio="none".