📌 این ویژگی مشخص می‌کنه که یک تصویر به عنوان پس‌زمینه روی عنصر اعمال شود.
در Tailwind می‌توانیم از کلاس‌های bg-[url('…')] یا پالت پیش‌فرض Tailwind استفاده کنیم.

✅ کلاس‌ها

• bg-none → بدون تصویر پس‌زمینه (default)

• bg-[url('…')] → تصویر دلخواه از URL

• bg-gradient-to-r/from-blue-500/to-green-500 → پس‌زمینه گرادیانت

• bg-[image:linear-gradient(...)] → گرادیانت سفارشی

✅ مثال

<div class="h-32 w-48 bg-[url('https://via.placeholder.com/150')] bg-center bg-cover mb-2">
  پس‌زمینه با تصویر
</div>

<div class="h-32 w-48 bg-none mb-2">
  بدون پس‌زمینه
</div>

<div class="h-32 w-48 bg-gradient-to-r from-blue-500 to-green-500 mb-2">
  پس‌زمینه گرادیانت
</div>

<div class="h-32 w-48 bg-[image:linear-gradient(to right,#ff0000,#00ff00)] mb-2">
  پس‌زمینه گرادیانت سفارشی
</div>

📌 نکات مهم

• اغلب با کلاس‌های bg-cover، bg-contain، bg-no-repeat ترکیب می‌شود.

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

  • sm:bg-[url('image1.png')] md:bg-[url('image2.png')]