एचटीएमएल डोम शैली पृष्ठभूमिस्थिति संपत्ति

<घंटा/>

पृष्ठभूमि स्थिति गुण का उपयोग मूल के सापेक्ष किसी तत्व की पृष्ठभूमि छवि के लिए प्रारंभिक स्थिति निर्धारित करने या प्राप्त करने के लिए किया जाता है।

सिंटैक्स

−

. के लिए वाक्य रचना निम्नलिखित है

बैकग्राउंड पोजीशन प्रॉपर्टी सेट करना -

object.style.backgroundPosition = value

मान

निम्नलिखित मान हैं -

<वें शैली ="चौड़ाई:82.517%; पाठ-संरेखण:केंद्र;">विवरण

मान
ऊपर बाएं शीर्ष केंद्र शीर्ष दाएं केंद्र बाएं केंद्र केंद्र मध्य दाएं नीचे बाएं निचला केंद्र नीचे दाएं	स्थिति को उनके नाम से समझा जा सकता है। यदि आप केवल एक मान लिखते हैं तो दूसरा हमेशा केंद्र में रहेगा।
xpos ypos	क्षैतिज (x) और लंबवत स्थिति (y) इंगित करने के लिए। यह ऊपरी बाएँ कोने से 0,0 से शुरू होता है। पिक्सेल को इकाइयों के रूप में प्राथमिकता दी जाती है, हालांकि आप किसी अन्य सीएसएस इकाई का भी उपयोग कर सकते हैं।
x% y%	प्रतिशत के संदर्भ में क्षैतिज (x) और लंबवत (y) स्थिति में स्थिति निर्दिष्ट करने के लिए। यह ऊपर बाएं से 0% 0% और नीचे दाएं कॉर्नेट 100% 100% के साथ शुरू होता है। चूंकि एक मान निर्दिष्ट करने का अर्थ है कि दूसरा केंद्र होगा यानी यह 50% पर होगा।
आरंभिक	इस गुण को प्रारंभिक मान पर सेट करने के लिए।
उत्तराधिकारी	मूल संपत्ति मान प्राप्त करने के लिए।

उदाहरण

आइए बैकग्राउंडपोजिशन प्रॉपर्टी के लिए एक उदाहरण देखें -

<!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>

आउटपुट

यह निम्नलिखित आउटपुट देगा -

एचटीएमएल डोम शैली पृष्ठभूमिस्थिति संपत्ति

स्थिति बदलें बटन पर क्लिक करने पर -

एचटीएमएल डोम शैली पृष्ठभूमिस्थिति संपत्ति