csswaveform

How to get a wave on 50% of screen?

In CSS, I want 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:

That

Actually I have that:

That

But it doesn'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;
}
<div id='wavebg'></div>

How I can change it for take 50% of the screen?

Solution 

  • body {
      background-color: #3f2982;
      
    }

    #dark-bg {
      width: 45%;
      height: 100vh;
      background-color: #27184f;
      float: left;
    }

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

    Since the width of your image is not sufficient to cover 50% of screen width, your background image looks as if its stuck in the left border of the browser. The trick is to apply a div immediately left to the image with the same color as the image. This will get you the desired result of wave in approximate center of the screen. You may need to adjust #dark-bg width with css @media queries for a better responsive layout.

    I sincerely hope it helps. This is the result you can have: Background image at 50%