How to create custom banner background using CSS ?

Last Updated : 11 Jun, 2020

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

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

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

<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> 

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

HTML

<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> 