কম্পিউটার টিউটোরিয়াল

CSS background-repeat প্রোপার্টি দিয়ে ব্যাকগ্রাউন্ড ইমেজ রিপিট নিয়ন্ত্রণ করা

background-repeat প্রোপার্টি দিয়ে ব্যাকগ্রাউন্ড ইমেজ কীভাবে রিপিট হবে তা নিয়ন্ত্রণ করা হয়।

মানগুলো:

repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit

উদাহরণ ১: repeat-x (হরিজেন্টালি রিপিট)

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

উদাহরণ ২: repeat-y (ভার্টিক্যালি রিপিট)

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("https://www.tutorialspoint.com/images/Swift.png");
  background-repeat: repeat-y;
  background-color: orange; 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>

আধুনিক মান: space (ইমেজগুলো সমান ব্যবধানে ছড়িয়ে দেয়, কাটা হয় না), round (ইমেজ রিসাইজ করে পূর্ণ সংখ্যায় ফিট করে)।

  1. CSS display: none ব্যবহার

  2. CSS দিয়ে এলিমেন্টের ব্যাকগ্রাউন্ড স্টাইল করা

  3. CSS ব্যাকগ্রাউন্ড প্রপার্টিগুলো

  4. CSS দিয়ে ব্যাকগ্রাউন্ড রিপিট (Background Repeat) ব্যবহার করা