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

background প্রপার্টি ব্যবহার করে একটি এলিমেন্টের সাথে যুক্ত ব্যাকগ্রাউন্ড ইমেজ সেট বা গেট করা হয়। এটি একটি শর্টহ্যান্ড প্রপার্টি এবং সর্বোচ্চ ৮টি প্রপার্টি ম্যানিপুলেট করতে পারে।

সিনট্যাক্স

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

object.style.background = "color image repeat attachment position size origin clip|initial|inherit"

মানসমূহ

ক্রম	মান ও বিবরণ
১	color এলিমেন্টের ব্যাকগ্রাউন্ড রঙ সেট করতে ব্যবহৃত হয়।
২	image এলিমেন্টের ব্যাকগ্রাউন্ড ইমেজ সেট করতে ব্যবহৃত হয়।
৩	repeat ব্যাকগ্রাউন্ড ইমেজ কীভাবে রিপিট হবে তা সেট করতে ব্যবহৃত হয়।
৪	attachment ব্যাকগ্রাউন্ড ইমেজ ফিক্সড থাকবে কিনা বা পেজের সাথে স্ক্রোল হবে তা সেট করতে ব্যবহৃত হয়।
৫	position ব্যাকগ্রাউন্ড ইমেজের শুরুতে পজিশন সেট করতে ব্যবহৃত হয়।
৬	size ব্যাকগ্রাউন্ড ইমেজের আকার সেট করতে ব্যবহৃত হয়।
৭	origin ব্যাকগ্রাউন্ড পজিশনিং এলাকা নির্দিষ্ট করতে ব্যবহৃত হয়।
৮	clip ব্যাকগ্রাউন্ড ইমেজ কতটুকু পেইন্ট হবে তা সেট করতে ব্যবহৃত হয়।

উদাহরণ

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

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

আউটপুট

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

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

CHANGE BACKGROUND ইমেজে ক্লিক করলে:

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