در CSS می‌تونیم بیش از یک تصویر پس‌زمینه برای یک عنصر تعریف کنیم.
این ویژگی برای طراحی‌های حرفه‌ای مثل: افکت‌های چندلایه، قرار دادن چندین آیکون یا ساخت بک‌گراندهای پیچیده کاربرد داره.

✨ سینتکس کلی

selector {
  background-image: url("image1.png"), url("image2.png"), url("image3.png");
  background-position: left top, right bottom, center;
  background-repeat: no-repeat, no-repeat, repeat;
}

📌 تصاویر از بالا به پایین لیست می‌شن. یعنی تصویر اول روی همه‌ی تصاویر بعدی قرار می‌گیره.

🔹 ۱. چند تصویر پس‌زمینه

div {
  width: 400px;
  height: 250px;
  background-image: url("stars.png"), url("sky.jpg");
  background-repeat: repeat, no-repeat;
  background-position: center, top left;
}

🔸 در اینجا:

• تصویر stars.png روی sky.jpg قرار می‌گیره.

• stars.png تکرار میشه، ولی sky.jpg ثابت می‌مونه.

🔹 ۲. استفاده از گرادیانت + تصویر

div {
  width: 400px;
  height: 250px;
  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
                    url("background.jpg");
  background-blend-mode: multiply;
}

📌 اینجا یک گرادیانت نیمه‌شفاف روی تصویر پس‌زمینه قرار گرفته.

🔹 ۳. سایز جداگانه برای هر پس‌زمینه

div {
  width: 400px;
  height: 250px;
  background-image: url("icon.png"), url("paper.jpg");
  background-size: 50px 50px, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: right bottom, center;
}

🔸 یعنی:

• icon.png در گوشه‌ی پایین سمت راست قرار می‌گیره.

• paper.jpg کل پس‌زمینه رو می‌پوشونه.

🔹 ۴. شورت‌هند (Background Shorthand)

div {
  background: url("icon.png") no-repeat right bottom,
              url("paper.jpg") no-repeat center / cover;
}

✅ نکات مهم

1. ترتیب تصاویر مهمه → تصویر اول بالاترین لایه است.

2. میشه تصویر + گرادیانت + رنگ رو با هم ترکیب کرد.

3. خاصیت‌هایی مثل background-position, background-size, background-repeat می‌تونن لیستی از مقادیر داشته باشن (برای هر تصویر جداگانه).