Course Progress 46%

CSS Backgrounds

← CSS HSL Colors CSS Background Image →

CSS Background का उपयोग किसी HTML element के पीछे color, image, position, repeat और size set करने के लिए किया जाता है। Background properties से web page का look और feel तय होता है।

CSS Background Properties

CSS में background से related कई properties होती हैं:

  • background-color
  • background-image
  • background-repeat
  • background-position
  • background-size
  • background-attachment
  • background (shorthand)

background-color

background-color element के पीछे color set करता है।

body {
  background-color: lightblue;
}

यह पूरे page का background light blue कर देगा।

background-image

background-image से background में image लगाई जाती है।

body {
  background-image: url("bg.jpg");
}

background-repeat

By default background image repeat होती है।

Repeat Off करना

body {
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
}

Repeat Options

background-repeat: repeat;      /* default */
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;

background-position

Image को कहाँ show करना है, यह background-position decide करता है।

body {
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

Common values:

  • left
  • right
  • top
  • bottom
  • center

background-size

background-size image का size control करता है।

Cover

body {
  background-image: url("bg.jpg");
  background-size: cover;
}

Image पूरे area को cover कर लेती है।

Contain

body {
  background-image: url("bg.jpg");
  background-size: contain;
}

Image पूरी दिखाई देती है लेकिन empty space हो सकता है।

background-attachment

यह decide करता है कि background scroll करेगा या fixed रहेगा।

body {
  background-image: url("bg.jpg");
  background-attachment: fixed;
}

Values:

  • scroll (default)
  • fixed

Multiple Background Images

एक element में multiple background images भी लगाई जा सकती हैं।

body {
  background-image: url("img1.png"), url("img2.jpg");
  background-position: left top, right bottom;
  background-repeat: no-repeat, no-repeat;
}

background Shorthand Property

सभी background properties को एक line में लिखा जा सकता है।

body {
  background: lightgray url("bg.jpg") no-repeat center fixed;
}

Order important नहीं है, लेकिन values सही होनी चाहिए।

Background on Specific Element

Background सिर्फ body पर ही नहीं, किसी भी element पर लगाया जा सकता है।

div {
  background-color: #f0f0f0;
  padding: 20px;
}

Background Gradient (Basic Intro)

CSS में image के बिना gradient background भी बनाया जा सकता है।

div {
  background: linear-gradient(to right, red, yellow);
}

Transparent Background

Transparent background के लिए rgba या hsla use किया जाता है।

div {
  background-color: rgba(0, 0, 0, 0.5);
}

Common Background Mistakes

Image Path गलत होना

background-image: url("images/bg.jpg");

Path सही होना जरूरी है।

background-size miss करना

बड़ी image बिना background-size के खराब दिख सकती है।

Best Practices

  • Large images optimize करें
  • background-size: cover hero sections के लिए best है
  • Text readability के लिए background contrast रखें
  • Repeat unnecessary हो तो no-repeat use करें

Summary

  • CSS background element के पीछे styling देता है
  • background-color सबसे basic property है
  • background-image image set करता है
  • background-repeat, position और size layout control करते हैं
  • shorthand background property code को short बनाती है
← CSS HSL Colors CSS Background Image →
  • Home