فصل هشتم: پس‌زمینه‌ها و تصاویر زمینه در CSS

(CSS Backgrounds & Background Images)

یکی از کاربردی‌ترین بخش‌ها برای زیباتر کردن سایت، کار با پس‌زمینه‌ها در CSS است. با این ویژگی‌ها می‌تونی رنگ، تصویر، موقعیت و تکرار تصویر پس‌زمینه را کنترل کنی.

---

۱. پس‌زمینه رنگی (background-color)

برای گذاشتن یک رنگ ساده:

.box {
  background-color: #f8bbd0;
}

---

۲. تصویر پس‌زمینه (background-image)

نمایش یک تصویر به عنوان پس‌زمینه:

.header {
  background-image: url('https://www.example.com/bg.jpg');
}

• توجه: حتماً آدرس تصویر در درست‌ترین حالت قرار بگیره.

---

۳. موقعیت قرارگیری تصویر (background-position)

تعیین می‌کند تصویر پس‌زمینه کجا قرار بگیرد:

.header {
  background-position: right top;
}

• گزینه‌ها: top, bottom, left, right, center یا با مقدار پیکسلی مثل: 20px 50px

---

۴. تکرار تصویر (background-repeat)

• repeat (پیش‌فرض): تصویر بارها تکرار می‌شود.
• no-repeat: تصویر فقط یکبار قرار می‌گیرد.
• repeat-x یا repeat-y: فقط افقی یا عمودی تکرار می‌شود.

.header {
  background-repeat: no-repeat;
}

---

۵. اندازه تصویر (background-size)

• cover: کل عنصر را پوشش می‌دهد و تصویر را بزرگ‌کوچک می‌کند.
• contain: تصویر به طور کامل در عنصر جا می‌گیرد، اما ممکن است سفید بماند.
• می‌تونی مقادیر پیکسلی یا درصدی هم بدی مثل: background-size: 120px 80px;

.header {
  background-size: cover;
}

---

۶. ترکیب سریع ویژگی‌ها (Shorthand)

می‌تونی همه‌ی ویژگی‌ها رو یکجا بنویسی:

.header {
  background: #ce93d8 url('bg.jpg') no-repeat center top / cover;
}

---

مثال کامل:

<div class="bg-demo">CSS Background Example</div>

.bg-demo {
  width: 400px;
  height: 200px;
  background-color: #fff9c4;
  background-image: url('https://www.w3schools.com/css/img_lights.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border: 1px solid #fbc02d;
  color: #333;
  font-size: 1.5rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

---

تمرین

۱. یک باکس بساز و یک تصویر به عنوان پس‌زمینه‌اش قرار بده.
۲. رنگ پس‌زمینه رو هم تنظیم کن تا اگر تصویر لود نشد، رنگ دیده شه.
۳. با background-repeat و background-position بازی کن و تاثیرشون رو ببین.
۴. مقدار background-size رو تغییر بده تا تفاوت cover و contain رو احساس کنی.

---

نکته سریع:

• پیشنهاد می‌کنم برای تست، از عکس‌های کوچک و ساده در ابتدا استفاده کنی تا راحت متوجه تکرار و موقعیت‌شون بشی.
• همیشه حواست به خوانایی متن روی عکس باشه، گاهی بهتره روی عکس، فیلتر یا رنگ نیمه‌شفاف بزاری!