📌 این ویژگی مشخص می‌کنه که پس‌زمینه یک عنصر چقدر بزرگ یا کوچک شود.
در Tailwind از کلاس‌های bg-{size} استفاده می‌کنیم.

✅ کلاس‌ها

• bg-auto → اندازه پس‌زمینه طبق اندازه اصلی تصویر (default)

• bg-cover → پس‌زمینه کل ابعاد عنصر را بپوشاند

• bg-contain → پس‌زمینه تمام تصویر را داخل عنصر جا دهد

• bg-[length] → اندازه دلخواه با مقدار px, %, rem و غیره

✅ مثال

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

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

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

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

📌 نکات مهم

• bg-cover مناسب برای پس‌زمینه‌های full-screen یا hero sections است.

• bg-contain وقتی مفیده که می‌خوای کل تصویر دیده شود بدون برش.

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

  • sm:bg-contain md:bg-cover