تعریف

ویژگی‌های پس‌زمینه (Background Properties) در CSS برای کنترل رنگ، تصویر و نحوه نمایش پس‌زمینه‌ی عناصر HTML استفاده می‌شوند.

مهم‌ترین ویژگی‌های مربوط به پس‌زمینه عبارتند از:

1. background-color – رنگ پس‌زمینه

2. background-image – تصویر پس‌زمینه

3. background-repeat – نحوه تکرار تصویر

4. background-attachment – نحوه اتصال تصویر به صفحه (ثابت یا متحرک)

5. background-position – موقعیت قرارگیری تصویر پس‌زمینه

1) رنگ پس‌زمینه (Background Color)

با استفاده از ویژگی background-color می‌توان رنگ پس‌زمینه یک عنصر را تعیین کرد.

مثال:

body { background-color: lightblue; }
div  { background-color: #f4f4f4; }

2) تصویر پس‌زمینه (Background Image)

ویژگی background-image تصویری را به‌عنوان پس‌زمینه عنصر قرار می‌دهد. به‌صورت پیش‌فرض تصویر در کل عنصر تکرار می‌شود.

مثال:

body {
  background-image: url("background.jpg");
}

⚠️ نکته: همیشه باید تضاد (کنتراست) رنگ متن و تصویر پس‌زمینه مناسب باشد تا متن خوانا بماند.

3) تکرار تصویر پس‌زمینه (Background Repeat)

به‌طور پیش‌فرض تصویر پس‌زمینه در افق و عمود تکرار می‌شود.
می‌توانیم نوع تکرار را مشخص کنیم:

• repeat → تکرار در دو جهت (پیش‌فرض)

• repeat-x → فقط در محور افقی

• repeat-y → فقط در محور عمودی

• no-repeat → بدون تکرار

مثال:

body {
  background-image: url("pattern.png");
  background-repeat: repeat-x;
}

4) اتصال پس‌زمینه (Background Attachment)

مشخص می‌کند که تصویر پس‌زمینه با اسکرول حرکت کند یا ثابت بماند.

• scroll → تصویر همراه با صفحه حرکت می‌کند (پیش‌فرض)

• fixed → تصویر ثابت می‌ماند

• local → تصویر همراه با محتوای همان عنصر حرکت می‌کند

مثال:

body {
  background-image: url("wallpaper.jpg");
  background-attachment: fixed;
}

5) موقعیت تصویر پس‌زمینه (Background Position)

موقعیت شروع تصویر پس‌زمینه را تعیین می‌کند.

مقادیر پرکاربرد:

• left top

• center center

• right bottom

مثال:

body {
  background-image: url("flower.png");
  background-repeat: no-repeat;
  background-position: center top;
}

✨ نکته حرفه‌ای

می‌توان همه ویژگی‌های بالا را به‌صورت خلاصه (Shorthand) در یک خط نوشت:

body {
  background: url("bg.jpg") no-repeat center fixed;
  background-size: cover; /* تصویر کل صفحه را پر کند */
}