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

background-origin প্রপার্টি ব্যবহার করে ব্যাকগ্রাউন্ডের উৎপত্তি (origin) অর্থাৎ এর রিলেটিভ পজিশন সেট বা গেট করা হয়। এটি বক্স মডেলের চারটি এলিয়ার যেকোনো একটির সাপেক্ষে হতে পারে।

সিনট্যাক্স

backgroundOrigin প্রপার্টি সেট করার সিনট্যাক্স:

object.style.backgroundOrigin = "padding-box|border-box|content-box|initial|inherit"

মানসমূহ

উদাহরণ

backgroundOrigin প্রপার্টির উদাহরণ:

<!DOCTYPE html> <html> <head> <style> 
  #DIV1 { 
    margin: 20px; 
    box-shadow: 0 0 5px black; 
    padding: 30px; 
    background: url("https://www.tutorialspoint.com/power_bi/images/power-bi-minilogo.jpg"); 
    background-origin: content-box; 
    background-repeat: no-repeat; 
    background-size: cover; 
    font-size: 24px; 
  } 
  div>p { 
    box-shadow: 0 0 5px darkgrey; 
  } 
</style> 
<script> 
  function changeBackOrigin(){ 
    document.getElementById("DIV1").style.backgroundOrigin="padding-box"; 
    document.getElementById("Sample").innerHTML="The background origin is now set to to padding-box"; 
  } 
</script> 
</head> 
<body> 
<h2>PowerBI Tutorial</h2> 
<div id="DIV1"> 
<p>Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI... Learn PowerBI...Learn PowerBI...</p> 
</div> 
<p>Change the above div background origin by clicking the below button</p> 
<button onclick="changeBackOrigin()">CHANGE ORIGIN</button> 
<p id="Sample"></p> 
</body> </html>

আউটপুট

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

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