background प्रॉपर्टी का उपयोग किसी तत्व से जुड़ी पृष्ठभूमि छवि को सेट या प्राप्त करने के लिए किया जाता है। यह एक शॉर्टहैंड प्रॉपर्टी है और 8 गुणों तक में हेरफेर कर सकती है।
सिंटैक्स
background प्रॉपर्टी सेट करने के लिए सिंटैक्स निम्नलिखित है:
object.style.background = "color image repeat attachment position size origin clip|initial|inherit"
मान
निम्नलिखित मान हैं:
| क्रमांक | मान एवं विवरण |
|---|---|
| 1 | color किसी तत्व का पृष्ठभूमि रंग सेट करने के लिए। |
| 2 | image किसी तत्व की पृष्ठभूमि छवि सेट करने के लिए। |
| 3 | repeat पृष्ठभूमि छवि कैसे दोहराई जाएगी यह सेट करने के लिए। |
| 4 | attachment पृष्ठभूमि छवि को फिक्स्ड या पेज के साथ स्क्रॉल करने के लिए सेट करने के लिए। |
| 5 | position पृष्ठभूमि छवि की प्रारंभिक स्थिति सेट करने के लिए। |
| 6 | size पृष्ठभूमि छवि का आकार सेट करने के लिए। |
| 7 | origin पृष्ठभूमि स्थिति क्षेत्र निर्दिष्ट करने के लिए। |
| 8 | clip पृष्ठभूमि छवि कितनी दूर तक चित्रित होगी यह सेट करने के लिए। |
उदाहरण
background प्रॉपर्टी का एक उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <style> #PIC{ width: 250px; height: 150px; border:solid 3px black; font-weight:100; text-align:center; color:white; font-size:40px; background: url("https://www.tutorialspoint.com/python/images/python-mini.jpg") no-repeat fixed 2% 8%; } </style> <script> function changeBackground(){ document.getElementById("PIC").style.backgroundImage="url(https://www.tutorialspoint.com/csharp/images/csharp-mini-logo.jpg)"; document.getElementById("Sample").innerHTML="The background URL is now changed and new background image can be seen."; } </script> </head> <body> <h2>Learning is fun</h2> <div id="PIC">Tutorial</div> <p>Click the below button to change the above background image for the div</p> <button onclick="changeBackground()">CHANGE BACKGROUND</button> <p id="Sample"></p> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा:
CHANGE BACKGROUND इमेज पर क्लिक करने पर:
