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

✅ کلاس‌ها

• bg-bottom → پایین باکس

• bg-center → وسط باکس

• bg-left → سمت چپ باکس

• bg-left-bottom → گوشه چپ پایین

• bg-left-top → گوشه چپ بالا

• bg-right → سمت راست باکس

• bg-right-bottom → گوشه راست پایین

• bg-right-top → گوشه راست بالا

• bg-top → بالای باکس

✅ مثال

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

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

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

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

📌 نکات مهم

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

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

  • sm:bg-center md:bg-right-top