فصل ۷ | CSS Basics

پس‌زمینه‌ها در CSS

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

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

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

style.css
div{
    background-color: lightblue; 
}

در این مثال، رنگ پس‌زمینه‌ی عنصر div برابر lightblue تنظیم شده است.

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

با ویژگی background-image می‌توان به‌جای رنگ ساده، یک تصویر را به‌عنوان پس‌زمینه‌ی عنصر قرار داد. مقدار این ویژگی با استفاده از تابع url() و آدرس فایل تصویر تعیین می‌شود.

style.css
body{
    background-color: url("background.jpg"); 
}

در این مثال، فایل background.jpg به‌عنوان تصویر پس‌زمینه‌ی کل صفحه تنظیم شده است.

تکرار پس‌زمینه (background-repeat)

به‌طور پیش‌فرض، تصویر پس‌زمینه به‌صورت افقی و عمودی تکرار می‌شود تا کل فضای عنصر را پر کند. با ویژگی background-repeat می‌توان این رفتار را کنترل کرد. برخی از مقادیر رایج آن عبارت‌اند از:

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

style.css
body{
    background-image: url("background.jpg");
    background-repeat: no-repeat;
}

در این مثال، تصویر پس‌زمینه فقط یک‌بار نمایش داده می‌شود و تکرار نمی‌گردد.

موقعیت پس‌زمینه (background-position)

ویژگی background-position موقعیت قرارگیری تصویر پس‌زمینه را داخل عنصر مشخص می‌کند. مقدار آن می‌تواند کلماتی مانند center ، top ، bottom ، left و right باشد.

style.css
body{
    background-image: url("background.jpg");
    background-repeat: no-repeat;
    background-position: center;
}

در این مثال، تصویر پس‌زمینه در مرکز صفحه قرار می‌گیرد و تکرار هم نمی‌شود.

اندازه‌ی پس‌زمینه (background-size)

ویژگی background-size برای تنظیم اندازه‌ی تصویر پس‌زمینه استفاده می‌شود. یکی از مقادیر پرکاربرد آن cover است که تصویر را طوری تغییر اندازه می‌دهد تا کل فضای عنصر را بدون کشیدگی پوشش دهد.

style.css
body{
    background-image: url("background.jpg");
    background-size: cover;
}

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

نکته: به‌جای نوشتن چند ویژگی جداگانه، می‌توان از ویژگی کوتاه‌شده‌ی background استفاده کرد تا رنگ، تصویر، تکرار و موقعیت را در یک خط تعریف کرد.