background-origin प्रॉपर्टी
background-origin प्रॉपर्टी यह निर्धारित करती है
कि बैकग्राउंड इमेज (विशेष रूप से इमेज,
भरण नहीं) एलिमेंट के सापेक्ष कैसे स्थित होगी:
बैकग्राउंड इमेज का हिस्सा बॉर्डर के नीचे चला जाएगा,
बैकग्राउंड बॉर्डर के नीचे नहीं जाएगा
या बैकग्राउंड केवल एलिमेंट की सामग्री के ऊपर ही स्थित होगा
(यानी padding
बैकग्राउंड को हटा देगा)।
सिंटैक्स
सिलेक्टर {
background-origin: padding-box | border-box | content-box;
}
वैल्यूज
| वैल्यू | विवरण |
|---|---|
border-box |
बैकग्राउंड इमेज बॉर्डर के नीचे चली जाएगी। |
padding-box |
बैकग्राउंड इमेज बॉर्डर के नीचे नहीं जाएगी। |
content-box |
बैकग्राउंड इमेज केवल सामग्री के ऊपर ही होगी। |
डिफॉल्ट वैल्यू: padding-box।
टिप्पणियाँ
background-origin प्रॉपर्टी काम नहीं करती है,
जब background-attachment
का वैल्यू fixed होता है। साथ ही background-repeat
के वैल्यू repeat पर background-origin प्रॉपर्टी
हमेशा border-box वैल्यू की तरह काम करती है।
उदाहरण . डिफॉल्ट रूप से
डिफॉल्ट रूप से बैकग्राउंड बॉर्डर के नीचे नहीं जाएगा:
<div id="elem"></div>
#elem {
background-image: url("bg.png");
background-repeat: no-repeat;
border: 10px dashed black;
padding: 30px;
width: 250px;
height: 150px;
}
:
उदाहरण . border-box वैल्यू
अब बैकग्राउंड बॉर्डर के नीचे चला जाएगा:
<div id="elem"></div>
#elem {
background-origin: border-box;
background-image: url("bg.png");
border: 10px dashed black;
padding: 30px;
width: 250px;
height: 150px;
}
:
उदाहरण . content-box वैल्यू
और अब बैकग्राउंड padding के कारण हट जाएगा:
<div id="elem"></div>
#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 वैल्यू की तरह काम करती है, यानी बैकग्राउंड
हमेशा बॉर्डर के नीचे चला जाता है:
<div id="elem"></div>
#elem {
background-repeat: repeat;
background-image: url("bg.png");
border: 10px dashed black;
padding: 30px;
width: 350px;
height: 300px;
}
:
यह भी देखें
-
background-clipप्रॉपर्टी,
जो बैकग्राउंड इमेज और भरण दोनों की स्थिति निर्धारित करती है -
backgroundप्रॉपर्टी,
जो बैकग्राउंड के लिए एक शॉर्टहैंड प्रॉपर्टी है
