🌄 CSS Background Properties
Last Updated: November 2025
Background properties in CSS define how the background of an element looks — including colors, images, gradients, and even visual effects like blur and opacity.
🗣 Hinglish Tip: Background ka matlab sirf color nahi hota — image, gradient, aur filter effects bhi include hote hain.
Common Background Properties
🎨 Example: Basic Background
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 300px;
height: 200px;
background-color: lightblue;
background-image: url("https://picsum.photos/300/200");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
🗣 Hinglish Tip: background-size: cover; image ko box ke area me fit karta hai bina stretch hue.
🌈 Background Gradient
Gradients create smooth color transitions. There are two main types:
Linear Gradient
background: linear-gradient(to right, #ff7e5f, #feb47b);
Radial Gradient
background: radial-gradient(circle, #1e3c72, #2a5298);
🗣 Hinglish Tip: linear-gradient ek direction me blend karta hai, jabki radial-gradient center se outward karta hai.
Gradient Background
<div class="gradient-box"></div>
<style>
.gradient-box {
width: 250px;
height: 150px;
background: linear-gradient(45deg, #ff00cc, #3333ff);
}
</style>
💡 You can also combine gradients with transparency:
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url("image.jpg");
Background Blur & Filter Effects
Use filter to add blur, brightness, or opacity.
.blur-box {
width: 300px;
height: 200px;
background: url("https://picsum.photos/300/200") center/cover no-repeat;
filter: blur(3px);
}
Common Filter Options
We will cover these effects in the filter section
