1. Gradient Backgrounds:
Linear Gradient:
A linear gradient creates a transition of colors along a straight line. It's defined using the linear-gradient() function in CSS.
Example:
background: linear-gradient(to right, #ff0000, #00ff00);
}
In this example, a linear gradient is applied from red (#ff0000) on the left to green (#00ff00) on the right.
Radial Gradient:
A radial gradient creates a transition of colors from the center to the edges in a circular or elliptical pattern. It's defined using the radial-gradient() function in CSS.
Example:
.radial {
background: radial-gradient(circle, #ff0000, #00ff00);
}
Here, a radial gradient is applied with a circular shape transitioning from red to green.
Repeating Gradients:
Repeating gradients allow gradients to repeat in a pattern. They're created using the repeating-linear-gradient() or repeating-radial-gradient() functions.
Example:
background: repeating-linear-gradient(to right, #ff0000, #00ff00 20%);
}
This creates a repeating linear gradient from red to green with a 20% interval.
2. Image Backgrounds:
Background Image:
CSS allows you to set images as backgrounds using the background-image property.
Example:
background-image: url('path/to/image.jpg');
background-size: cover;
background-position: center;
}
Here, an image is set as the background, and background-size: cover ensures the image covers the entire element, while background-position: center centers the image.
Multiple Background Images:
You can also use multiple images as backgrounds and layer them using the background-image property.
Example:
background-image: url('path/to/image1.jpg'), url('path/to/image2.jpg');
}
3. Background Patterns:
Background Repeat:
CSS provides options to repeat background images horizontally, vertically, or in both directions using the background-repeat property.
Example:
background-image: url('path/to/pattern.png');
background-repeat: repeat-x; /* Repeat horizontally */
}
Background Size:
The background-size property controls how a background image is scaled or repeated within its container.
Example:
background-image: url('path/to/pattern.png');
background-size: 100px 100px; /* Size of pattern */
}
Complete Example:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Backgrounds</title>
<style>
/* Gradient Background */
.gradient {
height: 200px;
background: linear-gradient(to right, #ff0000, #00ff00);
}
/* Radial Gradient */
.radial {
height: 200px;
background: radial-gradient(circle, #ff0000, #00ff00);
}
/* Repeating Gradient */
.repeating-gradient {
height: 200px;
background: repeating-linear-gradient(to right, #ff0000, #00ff00 20%);
}
/* Image Background */
.image-background {
height: 200px;
background-image: url('path/to/image.jpg');
background-size: cover;
background-position: center;
}
/* Multiple Images Background */
.multiple-images {
height: 200px;
background-image: url('path/to/image1.jpg'), url('path/to/image2.jpg');
background-position: left top, right bottom; /* Layering multiple images */
background-repeat: no-repeat, repeat; /* Repeat for one image, no repeat for the other */
}
/* Background Pattern */
.pattern {
height: 200px;
background-image: url('path/to/pattern.png');
background-repeat: repeat-x; /* Repeat horizontally */
background-size: 100px 100px; /* Size of pattern */
}
</style>
</head>
<body>
<div class="gradient"></div>
<div class="radial"></div>
<div class="repeating-gradient"></div>
<div class="image-background"></div>
<div class="multiple-images"></div>
<div class="pattern"></div>
</body>
</html>
In this example:
- .gradient, .radial, and .repeating-gradient demonstrate different types of gradient backgrounds.
- .image-background shows how to use an image as a background.
- .multiple-images layers multiple images as backgrounds.
- .pattern creates a background pattern using a repeated image.
Practice Excercise Practice now