Как сделать волну на фоне?

#css

у меня есть страница с карточками, на фоне расположена "волна", вроде выглядит супер
просто, но не могу понять как сделать ее просто и правильно, подскажите пожалуйста!
У меня есть svg с этой волной, но опять же как разбить весь фон на две части, чтобы
не затронуть контент весь, что-то совсем туплю(((



UPDATE
Вот svg волны
    

Ответы

Ответ 1

Не нашел SVG с повторяющейся волной поэтому такой не аккуратный переход, но с Вашим
SVG должно работать. Просто подставьте путь к своему файлу в background-image: url( путь )



.main {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjgwIiBoZWlnaHQ9IjE5NiI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTS03NCA4Ny4zMDdDMTQ1LjM5MyAyOS4xMDIgMzQ5LjYyNyAwIDUzOC43MDIgMGMyODMuNjExIDAgNTAyLjIyNyA2My4yMzUgNzg0LjcyNCA4Ny4zMDcgMTg4LjMzMiAxNi4wNDggMzMyLjE5IDEuNDk3IDQzMS41NzQtNDMuNjUzVjE5NkgtNzRWODcuMzA3eiIvPjwvc3ZnPg==");
  background-repeat: repeat-x;
  background-size: auto 50%;
  background-color: #eeeeee;
  background-position: bottom;
}

.content {
  width: 300px;
  height: 80%;
  background-color: #cccccc;
}