"Прикрепите" svg к вершине элемента, поскольку это изменяет размер

Question

Я пытаюсь добавить стильный элемент "wave" в начало div, однако при моих попытках svg сдвигается со своей позиции и оставляет пробел при изменении размера браузера.

Вот макет того, как он должен выглядеть:

CSS:

.wave {
  position: absolute;
  top: -72px;
}

.container {
  background: #eee;
}

.col-1 {
  height: 200px;
}

.col-2 {
  position: relative;
  background: #fff;
  height: 100px;
  width: 100%;
  margin-top: 100px;
}

Моя другая попытка использовала background-image: url(wave.svg); в селекторе :after, но результаты те же.

Вот кодекс:

https://codepen.io/anon/pen/LmRyLK

Как мне заставить волну оставаться на месте, когда она изменяет размер, а когда нет?

Answer 1

Установите SVG в качестве фонового изображения на элементе, в котором у вас есть чертовски пурпурный бит, вы можете наложить фоновые изображения друг на друга, например так:

.purpleElement{
    background: url("/path/to/asset/image.svg") bottom center no-repeat, purple;
    background-size: 100%;

    /*I've set a height here to replicate content*/
    height: 70vh;
    width: 100%;
}

Я разобрал ваш кодовый блок, чтобы показать, что произойдет