बैकग्राउंड-ओरिजिनल प्रॉपर्टी का इस्तेमाल बैकग्राउंड ओरिजिन यानी उसकी सापेक्ष स्थिति को सेट या पाने के लिए किया जाता है। यह चार बॉक्स मॉडल क्षेत्रों में से किसी के सापेक्ष हो सकता है।
सिंटैक्स
−
. के लिए वाक्य रचना निम्नलिखित हैबैकग्राउंडऑरिजिन प्रॉपर्टी सेट करना -
object.style.backgroundOrigin = "padding-box|border-box|content-box|initial|inherit"
मान
उपरोक्त संपत्ति मूल्यों को इस प्रकार समझाया गया है -
| Sr.No | मान और विवरण |
|---|---|
| 1 | पैडिंग-बॉक्स पृष्ठभूमि छवि को पैडिंग बॉक्स के सापेक्ष स्थित करने के लिए। यह डिफ़ॉल्ट मान है। डिफ़ॉल्ट मान। पृष्ठभूमि छवि पैडिंग बॉक्स के सापेक्ष स्थित है। |
| 2 | बॉर्डर-बॉक्स पृष्ठभूमि छवि को सीमा बॉक्स के सापेक्ष तैनात करने के लिए। |
| 3 | सामग्री-बॉक्स सामग्री बॉक्स के सापेक्ष पृष्ठभूमि छवि को तैनात करने के लिए। |
| 4 | प्रारंभिक इस संपत्ति को प्रारंभिक मूल्य पर सेट करने के लिए। |
| 5 | उत्तराधिकारी मूल संपत्ति मूल्य प्राप्त करने के लिए। |
उदाहरण
आइए बैकग्राउंडऑरिजिन प्रॉपर्टी के लिए एक उदाहरण देखें -
<!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> आउटपुट
यह निम्नलिखित आउटपुट देगा -
मूल बदलें बटन पर क्लिक करने पर -
