خلاصه جلسه ششم – کار با پس‌زمینه (background) در CSS:

• پس‌زمینه در CSS: کنترل ظاهر زمینه عناصر با استفاده از رنگ، تصویر و تنظیمات مختلف.
• پرارپرتی‌ها و مقادیر اصلی:
  • background-color: رنگ پس‌زمینه؛ می‌تواند نام رنگ (red)، هگز (#ff0000) یا rgb/rgba باشد.
  • background-image: تصویر پس‌زمینه؛ مقدار url("path/to/image") یا none.
  • background-repeat: تکرار تصویر؛ مقادیر:
    • repeat (تکرار افقی و عمودی)
    • repeat-x (فقط افقی)
    • repeat-y (فقط عمودی)
    • no-repeat (عدم تکرار)
    • round (تکرار با کشیده شدن تصویر برای پر کردن)
    • space (فاصله بین تصاویر برای پر کردن)
  • background-position: موقعیت تصویر؛ مقادیر کلیدواژه‌ای (center, top, bottom, left, right) یا مختصات (10px 20px, 50% 50%).
  • background-size: اندازه تصویر؛ مقادیر:
    • cover (پوشش کامل عنصر)
    • contain (درون عنصر قرار گیرد)
    • طول و عرض دلخواه (100px 200px).
  • background-attachment: نحوه رفتار تصویر با اسکرول؛ مقادیر:
    • scroll (تصویر با اسکرول حرکت می‌کند)
    • fixed (تصویر ثابت است – برای Parallax)
    • local (با محتوا اسکرول می‌شود).
  • background-clip: محدوده نمایش پس‌زمینه؛ مقادیر:
    • border-box (پوشش تمام حاشیه)
    • padding-box (پوشش تا padding)
    • content-box (پوشش فقط محتوای عنصر).

• خلاصه نویسی با پراپرتی کوتاه background:

   

  background: [color] [image] [repeat] [position] / [size] [attachment];