কম্পিউটার

CSS ব্যবহার করে এলিমেন্টের পটভূমি স্টাইলিং


উপাদানগুলির পটভূমি শৈলী করতে, আপনি পটভূমি চিত্র, পটভূমি অবস্থান সেট করতে পারেন। এর সাথে, একটি চিত্রকে অনুভূমিকভাবে বা উল্লম্বভাবে পুনরাবৃত্তি করতে ব্যাকগ্রাউন্ডের পুনরাবৃত্তি সেট করুন।

পটভূমি-অবস্থান

ব্যাকগ্রাউন্ড পজিশন হল ব্যাকগ্রাউন্ড ইমেজের প্রারম্ভিক পজিশন সেট করা। এর জন্য, ব্যাকগ্রাউন্ড-পজিশন প্রপার্টি ব্যবহার করুন।

উদাহরণ

আসুন এখন একটি উদাহরণ দেখি -

<!DOCTYPE html>
<html>
<head>
<style>
body {
   background-image: url("https://www.tutorialspoint.com/images/Swift.png");
   background-repeat: no-repeat;
   background-attachment: fixed;
   color: blue;
   background-position: left center;
}
.demo {
   text-decoration: overline underline;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

আউটপুট

CSS ব্যবহার করে এলিমেন্টের পটভূমি স্টাইলিং

ব্যাকগ্রাউন্ড-রিপিট

CSS-এ ব্যাকগ্রাউন্ড রিপিট ব্যবহার করা হয় ওয়েব পেজে একটি ব্যাকগ্রাউন্ড ইমেজ কিভাবে রিপিট হয় তা সেট করতে। এর জন্য, ব্যাকগ্রাউন্ড-রিপিট প্রপার্টি ব্যবহার করুন। নিম্নলিখিত সম্পত্তি মান হতে পারে −

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

উদাহরণ

আসুন এখন একটি উদাহরণ দেখি -

<!DOCTYPE html>
<html>
<head>
<style>
body {
   background-image: url("https://www.tutorialspoint.com/images/Swift.png");
   background-repeat: repeat-x;
   background-color: blue;
   color: white;
}
.demo {
   text-decoration: overline underline;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

আউটপুট

CSS ব্যবহার করে এলিমেন্টের পটভূমি স্টাইলিং


  1. CSS ব্যবহার করে ব্যাকগ্রাউন্ড ইমেজ সেট করা

  2. CSS ব্যবহার করে উপাদানগুলির চারপাশে মার্জিন স্পেস সেট করা

  3. CSS ব্যবহার করে Z-Index-এর সাথে ওভারল্যাপিং উপাদান

  4. CSS ব্যবহার করে ব্যাকগ্রাউন্ড রিপিট করুন