تصاویر پس‌زمینه یکی از ابزارهای قدرتمند در طراحی وب هستند که می‌توانند ظاهر سایت را جذاب‌تر و حرفه‌ای‌تر کنند. در این درس با ویژگی‌های مختلف مربوط به پس‌زمینه در CSS آشنا شدیم.

---

🟡 تفاوت تصویر پس‌زمینه با تصویر محتوایی

• <img> برای نمایش تصویر به‌عنوان بخشی از محتوا استفاده می‌شود.
• background-image برای افزودن تصویر به پس‌زمینه‌ی یک عنصر است و جنبه‌ی تزئینی دارد.

---

🧪 مثال ساده

.container {
  background-image: url("../images/color-tile.png");
}

🔹 مسیر تصویر باید نسبت به محل فایل CSS نوشته شود.

---

🔁 کنترل تکرار تصویر

• background-repeat: repeat-x; → تکرار افقی
• background-repeat: repeat-y; → تکرار عمودی
• background-repeat: no-repeat; → بدون تکرار

---

🔧 فاصله داخلی (Padding)

برای جلوگیری از تداخل محتوا با تصویر:

.container {
  padding-top: 15px;
}

---

🌼 افزودن تصویر به هدر

header {
  background-image: url("../images/flower.jpg");
  background-position: right center;
  background-repeat: no-repeat;
}

🔹 تصویر در سمت راست و مرکز عمودی قرار می‌گیرد.

---

🧱 ویژگی background-size

section {
  background-image: url("../images/bird.jpg");
  background-size: cover;
}

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

---

✂️ استفاده از شورت‌کات (Shorthand)

background: beige url("../images/bird.jpg") center center no-repeat;

🔹 تمام ویژگی‌ها در یک خط نوشته می‌شوند.

---

🎯 چند تصویر پس‌زمینه

.container {
  background:
    white url("../images/color-tile.png") left top repeat-x,
    url("../images/color-tile.png") left bottom repeat-x;
}

🔹 تصویر اول بالای عنصر، تصویر دوم پایین عنصر قرار می‌گیرد.

---

📚 مرور درس

ویژگی‌هایی که یاد گرفتیم:

• background-image
• background-repeat
• background-position
• background-size
• background (شورت‌کات)
• چند تصویر پس‌زمینه