How to Create Custom Banner Background Using CSS ?
Last Updated :
15 Jul, 2025
A Custom Banner Background in CSS refers to a specifically designed or styled background for a webpage banner, often using unique images, colors, gradients, or patterns. It enhances visual appeal and branding by adjusting properties like background-size, and background-position for a tailored look.
Approach
Here we are following these steps to Crete Custom Banner Background in CSS:
- Body Background: The body’s background is set to green, creating a solid base color for the webpage's background design.
- Geeks Class Setup: .geeks defines a white container positioned halfway down the page, covering 50% of the height and full width.
- Pseudo-Element Creation: The ::before pseudo-element creates additional decorative content within .geeks, styled to overlay a striped pattern.
- Gradient Background: Two diagonal linear gradients are applied to the ::before element, generating a repeating pattern with transparent and green sections.
- Pattern Transformation: The transform: rotateX(180deg) flips the gradient pattern vertically, adding dynamic visual interest to the banner background design.
Example : In this example we are following above-explained approach.
HTML
<html lang="en">
<head>
<title>
Custom Banner Background Using CSS
</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>
Output:
