backgroundPosition प्रॉपर्टी का उपयोग किसी तत्व की पृष्ठभूमि छवि की प्रारंभिक स्थिति को मूल बिंदु के सापेक्ष सेट या प्राप्त करने के लिए किया जाता है।
सिंटैक्स
backgroundPosition प्रॉपर्टी सेट करने के लिए सिंटैक्स निम्नलिखित है:
object.style.backgroundPosition = value
मान
निम्नलिखित मान हैं:
| मान | विवरण |
|---|---|
| top left top center top right center left center center center right bottom left bottom center bottom right | स्थिति को उनके नाम से समझा जा सकता है। यदि आप केवल एक मान लिखते हैं तो दूसरा हमेशा center होगा। |
| xpos ypos | क्षैतिज (x) और ऊर्ध्वाधर स्थिति (y) दर्शाने के लिए। यह शीर्ष बाएं कोने से 0,0 से शुरू होता है। पिक्सेल इकाइयों को प्राथमिकता दी जाती है हालांकि आप किसी अन्य CSS इकाई का भी उपयोग कर सकते हैं। |
| x% y% | क्षैतिज (x) और ऊर्ध्वाधर (y) स्थिति को प्रतिशत के संदर्भ में निर्दिष्ट करने के लिए। यह शीर्ष बाएं से 0% 0% से शुरू होता है और निचले दाएं कोने पर 100% 100% पर। चूंकि एक मान निर्दिष्ट करने का अर्थ है कि दूसरा center होगा यानी यह 50% पर होगा। |
| initial | इस प्रॉपर्टी को उसके प्रारंभिक मान पर सेट करने के लिए। |
| inherit | पैरेंट प्रॉपर्टी मान को विरासत में लेने के लिए। |
उदाहरण
backgroundPosition प्रॉपर्टी का एक उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <style> body{ background-image: url("https://www.tutorialspoint.com/power_bi/images/power-bi-minilogo.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: 20% 60%; } </style> <script> function changeBackPosition(){ document.body.style.backgroundPosition="top right"; document.getElementById("Sample").innerHTML="The background image position is now changed"; } </script> </head> <body> <h2>Learning is fun</h2> <p>Free learning tutorial for all...</p> <p>Change the background image position by clicking the below button.</p> <button onclick="changeBackPosition()">CHANGE POSITION</button> <p id="Sample"></p> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा:
CHANGE POSITION बटन पर क्लिक करने पर:
