📌 این ویژگی مشخص می‌کنه که پس‌زمینه یک عنصر آیا تکرار شود یا نه.
در Tailwind از کلاس‌های bg-repeat-* استفاده می‌کنیم.

✅ کلاس‌ها

• bg-repeat → پس‌زمینه در هر دو جهت تکرار می‌شود (default)

• bg-repeat-x → فقط در جهت افقی تکرار می‌شود

• bg-repeat-y → فقط در جهت عمودی تکرار می‌شود

• bg-repeat-round → پس‌زمینه به صورت مساوی تقسیم شده و تکرار می‌شود

• bg-repeat-space → پس‌زمینه با فاصله مساوی بین تکرارها

• bg-no-repeat → پس‌زمینه تکرار نمی‌شود

✅ مثال

<div class="h-32 w-48 bg-[url('https://via.placeholder.com/50')] bg-repeat mb-2">
  bg-repeat
</div>

<div class="h-32 w-48 bg-[url('https://via.placeholder.com/50')] bg-repeat-x mb-2">
  bg-repeat-x
</div>

<div class="h-32 w-48 bg-[url('https://via.placeholder.com/50')] bg-repeat-y mb-2">
  bg-repeat-y
</div>

<div class="h-32 w-48 bg-[url('https://via.placeholder.com/50')] bg-no-repeat mb-2">
  bg-no-repeat
</div>

📌 نکات مهم

• اغلب همراه با background-position و background-size استفاده می‌شود تا ظاهر دقیق پس‌زمینه کنترل شود.

• می‌توان با responsive ترکیب کرد:

  • sm:bg-repeat md:bg-no-repeat