Чтобы создать эффект волн на изображении сверху и снизу, вы можете использовать CSS свойство `background-image` и задать SVG-изображения в качестве фона элемента сайта.
Например, предположим, у вас есть блок с классом "wave-block", и вы хотите добавить волны в верхней и нижней частях блока. Вы можете использовать следующий CSS код:
```css
.wave-block {
background-image: url("верхняя_часть_волны.svg"), url("нижняя_часть_волны.svg");
background-position: top center, bottom center;
background-repeat: no-repeat;
}
```
Здесь `верхняя_часть_волны.svg` и `нижняя_часть_волны.svg` - это ссылки на ваши SVG-изображения волн. `background-position: top center` и `background-position: bottom center` позволяют разместить изображения в верхней и нижней частях блока соответственно, а `background-repeat: no-repeat` позволяет избежать повторения изображений.
Чтобы создать нужную форму блока с использованием волн, вам может потребоваться экспериментировать с размерами и позиционированием SVG-изображений в CSS.
