backgroundImage प्रॉपर्टी का उपयोग किसी तत्व के लिए पृष्ठभूमि छवि सेट या प्राप्त करने के लिए किया जाता है।
सिंटैक्स
backgroundImage प्रॉपर्टी सेट करने के लिए सिंटैक्स निम्नलिखित है:
object.style.backgroundImage = "url('URL')|none|initial|inherit"
मान
उपरोक्त प्रॉपर्टी मानों को निम्नानुसार समझाया गया है:
| क्रमांक | मान एवं विवरण |
|---|---|
| 1 | url('URL') छवि फ़ाइल स्थान निर्दिष्ट करने के लिए। |
| 2 | none कोई पृष्ठभूमि छवि उपयोग नहीं करने के लिए निर्दिष्ट करने के लिए और यह डिफ़ॉल्ट मान है। |
| 3 | initial इस प्रॉपर्टी को उसके प्रारंभिक मान पर सेट करने के लिए। |
| 4 | inherit पैरेंट प्रॉपर्टी मान को विरासत में लेने के लिए। |
उदाहरण
backgroundImage प्रॉपर्टी का उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <style> #DIV1 { height: 300px; width: 500px; background-image: url("https://www.tutorialspoint.com/mongodb/images/mongodb-minilogo.jpg"); background-repeat: no-repeat; background-size: cover; } </style> <script> function changeBackImage(){ document.getElementById("DIV1").style.backgroundImage="url('https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg')"; document.getElementById("Sample").innerHTML="The background image is now changed to PL/SQL Tutorial"; } </script> </head> <body> <h2>Learn</h2> <div id="DIV1"></div> <p>Change the above div background image by clicking the below button</p> <button onclick="changeBackImage()">CHANGE IMAGE</button> <p id="Sample"></p> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा:
CHANGE IMAGE बटन पर क्लिक करने पर:
