কম্পিউটার

এইচটিএমএল ডম স্টাইল ব্যাকগ্রাউন্ড সাইজ প্রপার্টি


HTML DOM স্টাইলের ব্যাকগ্রাউন্ড-সাইজ প্রপার্টি ব্যাকগ্রাউন্ড ইমেজের সাইজ সেট বা পেতে ব্যবহার করা হয়।

সিনট্যাক্স

-এর সিনট্যাক্স নিচে দেওয়া হল

ব্যাকগ্রাউন্ড সাইজ প্রপার্টি −

সেট করা হচ্ছে
object.style.backgroundSize = "auto|length|cover|contain|intial|inherit"

সম্পত্তি

উপরের বৈশিষ্ট্যগুলি নিম্নরূপ ব্যাখ্যা করা হয়েছে -

Sr. No বৈশিষ্ট্য ও বর্ণনা
1 অটো
ব্যাকগ্রাউন্ড ইমেজ পূর্ণ আকারে প্রদর্শিত হয় এবং এটি ডিফল্ট মান।
2 দৈর্ঘ্য
ব্যাকগ্রাউন্ড ইমেজের প্রস্থ এবং উচ্চতা সেট করার জন্য। প্রথম মানটি প্রস্থের জন্য এবং দ্বিতীয়টি উচ্চতার জন্য। যদি শুধুমাত্র একটি মান দেওয়া হয় তবে অনুপস্থিত মানটি স্বয়ংক্রিয়ভাবে ডিফল্ট হয়।
3 শতাংশ
শতাংশে পটভূমি চিত্রের প্রস্থ এবং উচ্চতা সেট করার জন্য। পিতামাতার উচ্চতা এবং প্রস্থের উপর ভিত্তি করে শতাংশ গণনা করা হয়। প্রথম মানটি প্রস্থ নির্ধারণ করে, দ্বিতীয় মানটি উচ্চতা নির্ধারণ করে। যদি শুধুমাত্র একটি মান দেওয়া হয় তবে অনুপস্থিত মানটি স্বয়ংক্রিয়ভাবে ডিফল্ট হয়।
4 কভার
ব্যাকগ্রাউন্ড ইমেজ স্কেল করার জন্য সম্পূর্ণ ব্যাকগ্রাউন্ড এরিয়া কভার করার জন্য বড় হতে হবে।
5 ধারণ করে
চিত্রটিকে স্কেল করার জন্য যাতে এটির উচ্চতা এবং প্রস্থ বিষয়বস্তুর এলাকার মধ্যে ফিট করতে পারে।
6 প্রাথমিক
এই সম্পত্তি প্রাথমিক মান সেট করার জন্য.
7 উত্তরাধিকার
পিতামাতার সম্পত্তির মান উত্তরাধিকার সূত্রে পাওয়া

উদাহরণ

আসুন HTML DOM শৈলী ব্যাকগ্রাউন্ডসাইজ প্রপার্টি -

এর উদাহরণ দেখি
<!DOCTYPE html>
<html>
<head>
<style>
   #DIV1{
      box-shadow: 0 2px 0 4px mintcream;
      padding: 45px;
      background: url("https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg");
      background-size: 150px 150px;
   }
</style>
<script>
   function changeBackSize(){
      document.getElementById("DIV1").style.backgroundSize="100px 100px";
      document.getElementById("Sample").innerHTML="The background image size is now reduced";
   }
</script>
</head>
<body>
<h2>PL/SQL Tutorial</h2>
<div id="DIV1"></div>
<p>Change the background image size for the above div by clicking the below button</p>
<button onclick="changeBackSize()">CHANGE SIZE</button>
<p id="Sample"></p>
</body>
</html>

আউটপুট

এটি নিম্নলিখিত আউটপুট −

তৈরি করবে

এইচটিএমএল ডম স্টাইল ব্যাকগ্রাউন্ড সাইজ প্রপার্টি

চেঞ্জ সাইজ বোতামে ক্লিক করলে -

এইচটিএমএল ডম স্টাইল ব্যাকগ্রাউন্ড সাইজ প্রপার্টি


  1. HTML DOM শৈলী শীর্ষ সম্পত্তি

  2. HTML DOM শৈলী কাউন্টাররিসেট সম্পত্তি

  3. HTML DOM স্টাইল কাউন্টারইনক্রিমেন্ট প্রপার্টি

  4. HTML DOM মান সম্পত্তি