background-origin प्रॉपर्टी

background-origin प्रॉपर्टी यह निर्धारित करती है कि बैकग्राउंड इमेज (विशेष रूप से इमेज, भरण नहीं) एलिमेंट के सापेक्ष कैसे स्थित होगी: बैकग्राउंड इमेज का हिस्सा बॉर्डर के नीचे चला जाएगा, बैकग्राउंड बॉर्डर के नीचे नहीं जाएगा या बैकग्राउंड केवल एलिमेंट की सामग्री के ऊपर ही स्थित होगा (यानी padding बैकग्राउंड को हटा देगा)।

सिंटैक्स

cssसिलेक्टर {
  background-origin: padding-box | border-box | content-box;
}

वैल्यूज

डिफॉल्ट वैल्यू: padding-box।

टिप्पणियाँ

background-origin प्रॉपर्टी काम नहीं करती है, जब background-attachment का वैल्यू fixed होता है। साथ ही background-repeat के वैल्यू repeat पर background-origin प्रॉपर्टी हमेशा border-box वैल्यू की तरह काम करती है।

उदाहरण . डिफॉल्ट रूप से

डिफॉल्ट रूप से बैकग्राउंड बॉर्डर के नीचे नहीं जाएगा:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

उदाहरण . border-box वैल्यू

अब बैकग्राउंड बॉर्डर के नीचे चला जाएगा:

html<div id="elem"></div>

css#elem {
  background-origin: border-box;
  background-image: url("bg.png");
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

उदाहरण . content-box वैल्यू

और अब बैकग्राउंड padding के कारण हट जाएगा:

html<div id="elem"></div>

css#elem {
  background-origin: content-box;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

उदाहरण . background-repeat: repeat पर

background-repeat के वैल्यू repeat पर background-origin प्रॉपर्टी हमेशा border-box वैल्यू की तरह काम करती है, यानी बैकग्राउंड हमेशा बॉर्डर के नीचे चला जाता है:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat;
  background-image: url("bg.png");
  border: 10px dashed black;
  padding: 30px;
  width: 350px;
  height: 300px;
}

Результат:

यह भी देखें