How to get wave on 50% of screen-CodePudding

Hey i want in css to make a background with 50% of a color and 50% of another color but this color need to be terminated by a wave like that

Actualy i have that

But it don t take 50% of screen

here is my code

body {
  background-color: #3f2982;
}

#wavebg {
  position: relative;
  content: "";
  bottom: 0;
  background: url('https://i.imgur.com/IJelEnu.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 50%;
  height: 100%;
  float: left;
}

And the html

<div id='wavebg'></div>

You can reproduce it here ->

CodePudding user response：

body {
  background-color: #3f2982;
}

body,html{
  height: 100%;
  width: 100%;
  margin: 0;
}

#wavebg {
  background: url('https://i.imgur.com/IJelEnu.png');
  background-size: 70% 100%;
  background-repeat: no-repeat;
  width: 60%;
  height: 200%;
}

<html><body><div id='wavebg'></div></body></html>