How to create custom banner background using CSS ?

In modern web designs, the custom background has emerged as a popular design for the banner background. A custom background has an infinite number of designs. The design is purely based on one’s imagination and creativity. Some common examples of custom backgrounds include wavy background, skewed background, etc.

This article will show the approach used to create the Sawblade background as it’s bottom resembles that of a saw. It is also known as zig-zag pattern.

Approach: The approach is to first create a chain of small triangles at the bottom and then rotate them along the X-axis so that they form the blade-like appearance.

HTML Code: In the HTML section, the <div> element is created which will be used to hold the pattern. 

HTML



filter_none

edit
close

play_arrow

link
brightness_4
code

<html lang="en">
<head>
  <title>
    Custom background
  </title>
</head>
<body>
  <div class="geeks">
  </div>
</body>
</html>

chevron_right


CSS Code: The CSS can be defined using the following steps:

  • Step 1: Provide a basic background color to the body.
  • Step 2: Align the created div to the center with a different background color of choice.
  • Step 3: Using the before selector, create a small chain of triangles by using the linear-gradient property with same degree but keeping one of them as negative.
  • Step 4: Use the rotate() function to rotate the triangles on the X-axis.

CSS

filter_none

edit
close

play_arrow

link
brightness_4
code

<style>
    body {
        background: green;
    }
  
    .geeks {
        position: absolute;
        top: 50%;
        width: 100%;
        height: 50%;
        background: white;
    }
  
    .geeks::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 15px;
        display: block;
        background: linear-gradient(
            -45deg, transparent, 33.33%,
            green 33.33%, green 66.66%
            transparent 66.66%),
            linear-gradient(45deg, transparent
            33.33%,green 33.33%, green 66.66%
            transparent 66.66%);
        background-size: 30px 60px;
        transform: rotateX(180deg);
    }
</style>

chevron_right


Complete Code: In this section, we will combine the above two sections to make the custom banner background using HTML and CSS.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<html lang="en">
  
<head>
    <title>
        Custom background
    </title>
    <style>
        body {
            background: green;
        }
  
        .geeks {
            position: absolute;
            top: 50%;
            width: 100%;
            height: 50%;
            background: white;
        }
  
        .geeks::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 15px;
            display: block;
            background: linear-gradient(
                -45deg, transparent, 33.33%,
                green 33.33%, green 66.66%, 
                transparent 66.66%),
                linear-gradient(45deg, transparent,
                33.33%,green 33.33%, green 66.66%,
                transparent 66.66%);
            background-size: 30px 60px;
            transform: rotateX(180deg);
        }
    </style>
</head>
  
<body>
    <div class="geeks">
    </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.