🌄 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

Property	Purpose	Example
background-color	Sets background color	background-color: lightblue;
background-image	Sets background image	background-image: url("bg.jpg");
background-repeat	Repeats or stops image repetition	background-repeat: no-repeat;
background-position	Sets image starting point	background-position: center;
background-size	Resizes background image	background-size: cover;
background-attachment	Makes image fixed or scrollable	background-attachment: fixed;
background-clip	Defines painting area (border-box, padding-box)	background-clip: padding-box;
background-origin	Defines background image position area	background-origin: content-box;
background	Shorthand for all background properties	background: #333 url("bg.jpg") no-repeat center/cover;

🎨 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

Filter	Effect	Example
blur(px)	Blurs background	filter: blur(4px);
brightness(%)	Adjusts brightness	filter: brightness(120%);
contrast(%)	Adjusts contrast	filter: contrast(80%);
grayscale(%)	Converts image to grayscale	filter: grayscale(100%);
opacity(%)	Adjusts transparency	opacity: 0.5;

We will cover these effects in the filter section

← Previous Next →