CSS Background Shorthand

CSS Background Shorthand एक single property है जिसकी मदद से हम multiple background properties को एक ही line में लिख सकते हैं। इससे code short, clean और readable बनता है।

background Property

background: value;

Background Shorthand में क्या-क्या शामिल हो सकता है?

background shorthand में ये properties combine की जा सकती हैं:

background-color
background-image
background-repeat
background-position
background-size
background-attachment

Basic Background Shorthand Example

body {
  background: lightblue;
}

यह सिर्फ background color set करेगा।

Background Image के साथ Shorthand

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

Background Image + Repeat

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

Background Image + Position

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

Background Image + Size

जब background-size use करते हैं, तो position और size के बीच / लगाना जरूरी होता है।

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

Background Image + Attachment

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

Complete Background Shorthand Example

body {
  background: #f0f0f0 url("bg.jpg") no-repeat center / cover fixed;
}

Order Rule (Important)

Shorthand में values का strict order नहीं होता, लेकिन:

background-size हमेशा / के बाद लिखा जाता है
Incorrect combination से property ignore हो सकती है

Shorthand और Individual Properties का Difference

Individual Properties

body {
  background-color: #f0f0f0;
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

Shorthand

body {
  background: #f0f0f0 url("bg.jpg") no-repeat center / cover;
}

Multiple Background Shorthand

Multiple backgrounds के लिए comma का use होता है।

div {
  background:
    url("img1.png") no-repeat left top,
    url("img2.jpg") no-repeat center;
}

Common Mistakes

Slash (`/`) भूल जाना

गलत:

background: url("bg.jpg") no-repeat center cover;

सही:

background: url("bg.jpg") no-repeat center / cover;

Unclear Values लिखना

Shorthand में wrong value से पूरा rule ignore हो सकता है।

Best Practices

Simple backgrounds के लिए shorthand use करें
Complex cases में individual properties readable होती हैं
background-size के साथ / rule याद रखें

Summary

background shorthand multiple properties को combine करता है
Code short और clean बनता है
background-size के लिए / जरूरी होता है
Multiple backgrounds shorthand से possible हैं