HTML DOM Style backgroundPosition প্রপার্টি

backgroundPosition প্রপার্টি ব্যবহার করে একটি এলিমেন্টের ব্যাকগ্রাউন্ড ইমেজের প্রাথমিক পজিশন সেট বা গেট করা হয়, যা মূল বিন্দু (origin) এর সাপেক্ষে রিলেটিভ।

সিনট্যাক্স

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>

আউটপুট

নিচের আউটপুট তৈরি হবে:

HTML DOM Style backgroundPosition প্রপার্টি

CHANGE POSITION বাটনে ক্লিক করলে:

HTML DOM Style backgroundPosition প্রপার্টি