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:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        How to Create a Wave Image
        for a Background using CSS?    
    </title>
      
    <style>
        .wave {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            height: 70px;
            width: 100%;
            background: dodgerblue;
            z-index: -1;
        }
        .wave::before {
            content: "";
            display: block;
            position: absolute;
            border-radius: 100% 90%;
            width: 51%;
            height: 75px;
            background-color: white;
            right: 0px;
            top: 35px;
        }
        .wave::after {
            content: "";
            display: block;
            position: absolute;
            border-radius: 100% 90%;
            width: 51%;
            height: 75px;
            background-color: dodgerblue;
            left: -8px;
            top: 25px;
        }
    </style>
</head>
  
<body style="text-align:center;">
    <h1 style="color:forestgreen;">
        Geeks For Geeks
    </h1>
      
    <div class="wave"></div>
</body>
  
</html>

chevron_right


Output:

The problem of using before and after is as we have to define their position in pxiels 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        How to Create a Wave Image
        for a Background using CSS?    
    </title>
      
    <style>
        svg {
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
        .container {
            display: inline-block;
            position: absolute;
            width: 100%;
            padding-bottom: 100%;
            vertical-align: middle;
            overflow: hidden;
            top: 0;
            left: 0;
        }
        body {
            overflow: hidden;
        }
    </style>
</head>
  
<body style="text-align:center;">
    <h1 style="color:lawngreen;">
        Geeks For Geeks
    </h1>
      
    <div class="container">
      
        <!-- Creating a SVG image -->
        <svg viewBox="0 0 500 500" 
            preserveAspectRatio="xMinYMin meet">
              
            <path d="M0, 100 C150, 200 350,
                0 500, 100 L500, 00 L0, 0 Z"
                style="stroke:none; fill:dodgerblue;">
            </path>
        </svg>
    </div>
</body>
  
</html>

chevron_right


Output:



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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        How to Create a Wave Image
        for a Background using CSS?    
    </title>
      
    <style>
        svg {
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
        }
        .container {
            display: inline-block;
            position: absolute;
            width: 100%;
            padding-bottom: 100%;
            vertical-align: middle;
            overflow: hidden;
            top: 0;
            left: 0;
        }
        body {
            overflow: hidden;
        }
    </style>
</head>
  
<body style="text-align:center;">
    <h1 style="color:white;">
        Geeks For Geeks
    </h1>
      
    <div class="container">
        <svg viewBox="0 0 500 500" 
            preserveAspectRatio="xMinYMin meet"
            style="z-index: -2;">
              
            <path d="M0, 100 C150, 200 350,
                0 500, 100 L500, 00 L0, 0 Z"
                style="stroke: none; 
                fill:rgba(30, 144, 225, 0.5);">
            </path>
        </svg>
    </div>
      
    <div class="container">
        <svg viewBox="0 0 500 500" 
            preserveAspectRatio="xMinYMin meet"
            style="z-index:-1;">
              
            <path d="M0, 80 C300, 0 400, 
                300 500, 50 L500, 00 L0, 0 Z"
                style="stroke: none; 
                fill:rgba(153, 50, 204, 0.5);">
            </path>
        </svg>
    </div>
      
    <div class="container">
        <svg viewBox="0 0 500 500" 
            preserveAspectRatio="xMinYMin meet"
            style="z-index:-3;">
              
            <path d="M0, 100 C150, 300 350,
                0 500, 100 L500, 00 L0, 0 Z"
                style="stroke: none; 
                fill:rgba(220, 20, 60, 0.5);">
            </path>
        </svg>
    </div>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.