ব্যাকগ্রাউন্ড প্রোপার্টি একটি উপাদানের সাথে যুক্ত ব্যাকগ্রাউন্ড ইমেজ সেট বা পাওয়ার জন্য ব্যবহার করা হয়। এটি একটি শর্টহ্যান্ড প্রপার্টি এবং 8টি প্রপার্টি পর্যন্ত ম্যানিপুলেট করতে পারে।
সিনট্যাক্স
−
-এর সিনট্যাক্স নিচে দেওয়া হলব্যাকগ্রাউন্ড প্রপার্টি সেট করা হচ্ছে -
object.style.background = "color image repeat attachment position size origin clip|initial|inherit"
মান
নিম্নোক্ত মান −
| Sr.No | মান ও বর্ণনা |
|---|---|
| 1 | রঙ একটি উপাদান পটভূমি রঙ সেট করার জন্য. |
| 2 | ছবি একটি উপাদান পটভূমি ইমেজ সেট করার জন্য. |
| 3 | পুনরাবৃত্তি ব্যাকগ্রাউন্ড ইমেজ পুনরাবৃত্তি হবে কিভাবে সেট করার জন্য. |
| 4 | সংযুক্তি পৃষ্ঠার সাথে স্থির বা স্ক্রল এ ব্যাকগ্রাউন্ড ইমেজ সেট করার জন্য। |
| 5 | অবস্থান ব্যাকগ্রাউন্ড ইমেজ প্রারম্ভিক অবস্থান সেট করার জন্য. |
| 6 | আকার ব্যাকগ্রাউন্ড ইমেজ সাইজ সেট করার জন্য। |
| 7 | উৎস ব্যাকগ্রাউন্ড পজিশনিং এরিয়া নির্দিষ্ট করার জন্য। |
| 8 | ক্লিপ ব্যাকগ্রাউন্ড ইমেজ কতদূর আঁকা হয় তা নির্ধারণের জন্য। |
উদাহরণ
ব্যাকগ্রাউন্ড প্রপার্টি -
-এর জন্য একটি উদাহরণ দেখা যাক<!DOCTYPE html>
<html>
<head>
<style>
#PIC{
width: 250px;
height: 150px;
border:solid 3px black;
font-weight:100;
text-align:center;
color:white;
font-size:40px;
background: url("https://www.tutorialspoint.com/python/images/python-mini.jpg") no-repeat fixed 2% 8%;
}
</style>
<script>
function changeBackground(){
document.getElementById("PIC").style.backgroundImage="url(https://www.tutorialspoint.com/csharp/images/csharp-mini-logo.jpg)";
document.getElementById("Sample").innerHTML="The background URL is now changed and new background image can be seen.";
}
</script>
</head>
<body>
<h2>Learning is fun</h2>
<div id="PIC">Tutorial</div>
<p>Click the below button to change the above background image for the div</p>
<button onclick="changeBackground()">CHANGE BACKGROUND</button>
<p id="Sample"></p>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
চেঞ্জ ব্যাকগ্রাউন্ড ইমেজ-
-এ ক্লিক করলে
