HTML DOM स्टाइल बैकग्राउंड-साइज़ प्रॉपर्टी का उपयोग बैकग्राउंड इमेज का आकार सेट करने या प्राप्त करने के लिए किया जाता है।
सिंटैक्स
−
. के लिए वाक्य रचना निम्नलिखित हैबैकग्राउंड साइज प्रॉपर्टी सेट करना -
object.style.backgroundSize = "auto|length|cover|contain|intial|inherit"
गुण
उपरोक्त गुणों को इस प्रकार समझाया गया है -
| Sr.No | <वें शैली ="चौड़ाई:91.2244%; पाठ-संरेखण:केंद्र;">गुण और विवरण|
|---|---|
| 1 | स्वतः पृष्ठभूमि छवि पूर्ण आकार में प्रदर्शित होती है और यह डिफ़ॉल्ट मान है। |
| 2 | लंबाई पृष्ठभूमि छवि की चौड़ाई और ऊंचाई निर्धारित करने के लिए। पहला मान चौड़ाई के लिए है और दूसरा ऊंचाई के लिए है। यदि केवल एक मान दिया जाता है तो अनुपलब्ध मान स्वतः पर डिफ़ॉल्ट हो जाता है। |
| 3 | प्रतिशत बैकग्राउंड इमेज की चौड़ाई और ऊंचाई को प्रतिशत में सेट करने के लिए। प्रतिशत की गणना माता-पिता की ऊंचाई और चौड़ाई के आधार पर की जाती है। पहला मान चौड़ाई सेट करता है, दूसरा मान ऊंचाई सेट करता है। यदि केवल एक मान दिया जाता है तो अनुपलब्ध मान स्वतः पर डिफ़ॉल्ट हो जाता है। |
| 4 | कवर संपूर्ण पृष्ठभूमि क्षेत्र को कवर करने के लिए पृष्ठभूमि छवि को बड़ा करने के लिए स्केलिंग के लिए। |
| 5 | शामिल है छवि को स्केल करने के लिए ताकि इसकी ऊंचाई और चौड़ाई सामग्री क्षेत्र के अंदर फिट हो सके। |
| 6 | आरंभिक इस संपत्ति को प्रारंभिक मूल्य पर सेट करने के लिए। |
| 7 | उत्तराधिकारी मूल संपत्ति मूल्य प्राप्त करने के लिए |
उदाहरण
आइए HTML DOM स्टाइल बैकग्राउंड साइज प्रॉपर्टी के उदाहरण को देखें -
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
box-shadow: 0 2px 0 4px mintcream;
padding: 45px;
background: url("https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg");
background-size: 150px 150px;
}
</style>
<script>
function changeBackSize(){
document.getElementById("DIV1").style.backgroundSize="100px 100px";
document.getElementById("Sample").innerHTML="The background image size is now reduced";
}
</script>
</head>
<body>
<h2>PL/SQL Tutorial</h2>
<div id="DIV1"></div>
<p>Change the background image size for the above div by clicking the below button</p>
<button onclick="changeBackSize()">CHANGE SIZE</button>
<p id="Sample"></p>
</body>
</html> आउटपुट
यह निम्नलिखित आउटपुट देगा -
चेंज साइज़ बटन पर क्लिक करने पर -
