background-origin प्रॉपर्टी का उपयोग पृष्ठभूमि मूल यानी इसकी सापेक्ष स्थिति को सेट या प्राप्त करने के लिए किया जाता है। यह चार बॉक्स मॉडल क्षेत्रों में से किसी के सापेक्ष हो सकता है।
सिंटैक्स
backgroundOrigin प्रॉपर्टी सेट करने के लिए सिंटैक्स निम्नलिखित है:
object.style.backgroundOrigin = "padding-box|border-box|content-box|initial|inherit"
मान
उपरोक्त प्रॉपर्टी मानों को निम्नानुसार समझाया गया है:
| क्रमांक | मान एवं विवरण |
|---|---|
| 1 | padding-box पृष्ठभूमि छवि को पैडिंग बॉक्स के सापेक्ष स्थित करने के लिए। यह डिफ़ॉल्ट मान है। डिफ़ॉल्ट मान। पृष्ठभूमि छवि पैडिंग बॉक्स के सापेक्ष स्थित है। |
| 2 | border-box पृष्ठभूमि छवि को बॉर्डर बॉक्स के सापेक्ष स्थित करने के लिए। |
| 3 | content-box पृष्ठभूमि छवि को कंटेंट बॉक्स के सापेक्ष स्थित करने के लिए। |
| 4 | initial इस प्रॉपर्टी को उसके प्रारंभिक मान पर सेट करने के लिए। |
| 5 | inherit पैरेंट प्रॉपर्टी मान को विरासत में लेने के लिए। |
उदाहरण
backgroundOrigin प्रॉपर्टी का एक उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <style> #DIV1 { margin: 20px; box-shadow: 0 0 5px black; padding: 30px; background: url("https://www.tutorialspoint.com/power_bi/images/power-bi-minilogo.jpg"); background-origin: content-box; background-repeat: no-repeat; background-size: cover; font-size: 24px; } div>p { box-shadow: 0 0 5px darkgrey; } </style> <script> function changeBackOrigin(){ document.getElementById("DIV1").style.backgroundOrigin="padding-box"; document.getElementById("Sample").innerHTML="The background origin is now set to to padding-box"; } </script> </head> <body> <h2>PowerBI Tutorial</h2> <div id="DIV1"> <p>Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI... Learn PowerBI...Learn PowerBI...</p> </div> <p>Change the above div background origin by clicking the below button</p> <button onclick="changeBackOrigin()">CHANGE ORIGIN</button> <p id="Sample"></p> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा:
CHANGE ORIGIN बटन पर क्लिक करने पर:
