How to Create a Wave Image for a Background using HTML and CSS ?

This type of background creates uniqueness on your webpage by avoiding regular rectangular sized background or header. The following header design will show your creativity. This design can be achieved in two ways: 
 

• Using ::before and ::after selector on a div element in CSS.
• Using SVG in HTML.

Example: This example uses ::before and ::after selector on a div element to create a wave image for background.
 

Output: 
 

👁 Image

The problem of using before and after is as we have to define their position in pixels thus as the screen height changes its shape changes and so it is not that proper as it seems. So, for that purpose we use SVG in CSS.
Example: This example uses SVG to design a wave image for background. 
 

Output: 
 

👁 Image

Example: This example uses SVG to design a wave image for background. 
 

Output: 
 

👁 Image