← Back to CSS Course | Chapter 2: Colors & Backgrounds | Lesson 14 of 21

CSS Background Origin

background-origin तय करता है कि box के किस edge -- outer border, padding, या सिर्फ content -- से किसी background image की positioning measure होती है।

In this page:

  1. तीन Origin Values
  2. Visible Border के साथ Origin क्यों मायने रखता है
  3. Origin, background-position के साथ Interact करता है
  4. Origin बनाम background-clip
  5. Practical Use Cases
Syntax
css 
selector {
  background-origin: padding-box | border-box | content-box;
}

तीन Origin Values

background-origin: border-box background को border के outer edge के relative position करता है; padding-box (default) इसे border के inner edge के relative position करता है, यानी padding के बाहर; content-box इसे content area के edge के relative position करता है, padding के अंदर।

Note:
  • Accepted values:
  • padding-box — padding edge से शुरू होता है (default)
  • border-box — border edge से शुरू होता है
  • content-box — content edge से शुरू होता है
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: The Three Origin Values

css 
<style>
.box {
  border: 10px dashed red;
  padding: 10px;
  background-image: url('https://placehold.co/60x60');
  background-repeat: no-repeat;
  background-origin: border-box;
}
</style>
<div class="box">border-box: background starts under the border</div>

Visible Border के साथ Origin क्यों मायने रखता है

जब किसी element का border visible होता है, तो background-origin: border-box background image को border area के नीचे तक फैलने देता है, जबकि padding-box (default) image को border के बिल्कुल अंदर से शुरू होते रखता है -- visual फ़र्क किसी मोटे या dashed border और positioned background image के साथ सबसे साफ़ दिखता है।

Note:
  • Accepted values:
  • padding-box — position padding edge से शुरू होता है (initial value)
  • border-box — outer border edge से शुरू होता है
  • content-box — content edge से शुरू होता है
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Why Origin Matters with a Visible Border

css 
<style>
.box {
  border: 10px dashed black;
  background-image: url('https://placehold.co/80x80');
  background-repeat: no-repeat;
  background-origin: border-box;
}
</style>
<div class="box">Image extends underneath the dashed border</div>

Origin, background-position के साथ Interact करता है

top left या 10px 10px जैसी background-position values background-origin द्वारा बताए गए किसी भी box से measure होती हैं -- position बदले बिना origin बदलना visibly बदल सकता है कि image कहाँ दिखती है, क्योंकि position का reference point ही move हो गया।

Note:
  • Accepted values:
  • padding-box — position padding edge से शुरू होता है (initial value)
  • border-box — outer border edge से शुरू होता है
  • content-box — content edge से शुरू होता है
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Origin Interacts with background-position

css 
<style>
.box {
  border: 10px solid black;
  padding: 10px;
  background-image: url('https://placehold.co/40x40');
  background-repeat: no-repeat;
  background-position: top left;
  background-origin: content-box;
}
</style>
<div class="box">Position measured from the content box, not the border</div>

Origin बनाम background-clip

background-origin control करता है कि image की positioning कहाँ से शुरू होती है; background-clip (एक अलग property) control करता है कि image कहाँ cut off होकर invisible हो जाती है -- इन्हें अक्सर matching values पर set किया जाता है लेकिन ये अलग-अलग समस्याएँ solve करते हैं और specific effects के लिए combine किए जा सकते हैं।

Note:
  • Accepted values:
  • padding-box — position padding edge से शुरू होता है (initial value)
  • border-box — outer border edge से शुरू होता है
  • content-box — content edge से शुरू होता है
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Origin vs background-clip

css 
<style>
.box {
  border: 10px dashed red;
  background-image: url('https://placehold.co/80x80');
  background-origin: border-box;
  background-clip: padding-box;
}
</style>
<div class="box">Origin starts under the border, clip cuts it off there</div>

Practical Use Cases

background-origin तब सबसे ज़्यादा relevant होता है जब किसी element में padding और border दोनों हों और किसी positioned (tiled/cover नहीं) background image को उनमें से किसी एक box edge के साथ, दूसरे के बजाय, precisely align करना हो -- purely tiled patterns या cover-sized photos के लिए default को शायद ही कभी बदलने की ज़रूरत पड़े।

उदाहरण: Practical Use Cases

css 
<style>
.box {
  border: 8px solid #333;
  padding: 12px;
  background-image: url('https://placehold.co/40x40');
  background-repeat: no-repeat;
  background-position: top right;
  background-origin: content-box;
}
</style>
<div class="box">Positioned icon aligns precisely with the content edge</div>
Live Example
Related Topics

CSS Background Size · CSS Background Clip · CSS Background Shorthand · CSS Background Attachment

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. यह उम्मीद करना कि background-origin, background-attachment: fixed के साथ काम करेगा, जबकि इसे नज़रअंदाज़ कर दिया जाता है।
  2. background-origin (position कहाँ शुरू होती है) को background-clip (painting कहाँ cut होती है) के साथ confuse करना।
  3. यह भूल जाना कि default origin padding-box है, इसलिए image border के अंदर से शुरू होती है।
ब्राउज़र सपोर्ट

हर modern browser में supported: Chrome, Firefox, Safari, Edge और Opera।

🔒

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Background Size Next Lesson → CSS Background Clip

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.