CSS Background Shorthand

Shorthand Syntax और Property Order

background shorthand accept करता है: background-color background-image background-position/background-size background-repeat background-attachment background-origin background-clip, लगभग इसी order में, position और size को एक forward slash से अलग करते हुए जब दोनों दिए गए हों।

shorthand में शामिल न की गई कोई भी longhand अपनी initial value पर reset हो जाती है, अपने हाल पर नहीं छोड़ी जाती।

उदाहरण: Shorthand Syntax and Property Order

<style>
.box {
  height: 150px;
  background: #fff url('https://placehold.co/200x100') center/cover no-repeat fixed;
}
</style>
<div class="box">color, image, position/size, repeat, attachment — all in one shorthand</div>

Order और Slash क्यों मायने रखते हैं

position, size से पहले आना चाहिए, / से अलग करके, क्योंकि parser को यह पहचानना होता है कि दो length values position के लिए हैं या size के लिए -- background: url(x.jpg) center/cover no-repeat position को center और size को cover set करता है, जबकि इनका order बदलना invalid है।

उदाहरण: Why Order and the Slash Matter

<style>
.box {
  height: 150px;
  background: url('https://placehold.co/200x100') center/cover no-repeat;
}
</style>
<div class="box">Position comes before the slash, size after</div>

Shorthand बिना बताई गई Longhands को Reset करता है

background: red लिखना सिर्फ background-color set करता है और चुपचाप background-image, background-repeat, background-position, और बाकी हर background-* property को उनकी defaults पर reset कर देता है -- यह सबसे common shorthand gotcha है, जो गलती से कहीं और set की गई image मिटा देता है।

उदाहरण: Shorthand Resets Unspecified Longhands

<style>
.box {
  background-image: linear-gradient(135deg, #1e88e5, #8e24aa);
  height: 60px;
}
.reset {
  background-image: linear-gradient(135deg, #1e88e5, #8e24aa);
  background: red;
  height: 60px;
}
</style>
<div class="box">Keeps its gradient image</div>
<div class="reset">Shorthand silently wiped the image, only red remains</div>

Partial Shorthand भी Valid है

आपको हर value शामिल करने की ज़रूरत नहीं है; background: url('bg.jpg') no-repeat center पूरी तरह valid है और सिर्फ image, repeat, और position को छूता है, लेकिन फिर भी color/size/attachment/origin/clip को initial पर reset कर देता है क्योंकि उनका ज़िक्र नहीं किया गया था।

उदाहरण: Partial Shorthand Is Still Valid

<style>
.box {
  height: 150px;
  background: url('https://placehold.co/200x100') no-repeat center;
}
</style>
<div class="box">Only image, repeat, and position specified — rest reset to defaults</div>

Shorthand बनाम Longhand कब इस्तेमाल करें

पूरी तरह specified background के लिए shorthand ज़्यादा compact है लेकिन longhand तब ज़्यादा safe है जब किसी मौजूदा background के सिर्फ एक हिस्से में tweak करना हो (जैसे किसी media query में सिर्फ background-position बदलना) क्योंकि यह गलती से बाकियों को reset नहीं करेगा।

उदाहरण: When to Use Shorthand vs Longhand

<style>
.full {
  background: #333 linear-gradient(135deg, rgba(255,255,255,.2), transparent) center/cover no-repeat;
  height: 80px;
  color: #fff;
  padding: 8px;
}
@media (max-width: 600px) {
  .full {
    background-position: top;
  }
}
</style>
<div class="full">Longhand tweak in the media query, shorthand elsewhere</div>