Background Color و Background Image

پس‌زمینه رنگی و تصویری: Background Color و Background Image

وارد فصل نهم شدیم؛ فصلی که به یکی از بصری‌ترین جنبه‌های CSS اختصاص داره: پس‌زمینه‌ها و حاشیه‌ها. اولین قدم در این مسیر، آشنایی با دو Property پایه‌ای‌ست که مشخص می‌کنن پشت یک عنصر، چه رنگ یا چه تصویری قرار بگیره.

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

.box {
  background-color: #f0f8ff;
}

Property به اسم background-color رنگ پس‌زمینه یک عنصر رو مشخص می‌کنه. این Property می‌تونه هر مقداری از روش‌های رنگی که در فصل ۷ به‌طور کامل دیدیم رو بپذیره: نام رنگ، Hex، rgb()، hsl() و مشابه‌ها.

.example-a {
  background-color: coral;
}

.example-b {
  background-color: #2c3e50;
}

.example-c {
  background-color: rgba(52, 152, 219, 0.2);
}

همون‌طور که در فصل ۴ با Box Model دیدیم، رنگ پس‌زمینه، هم ناحیه Content و هم ناحیه Padding رو پوشش می‌ده؛ ولی هرگز به ناحیه Margin نمی‌رسه، چون Margin همیشه شفاف باقی می‌مونه.

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

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

Property به اسم background-image یک تصویر رو به‌عنوان پس‌زمینه یک عنصر تنظیم می‌کنه. مقدار این Property همیشه با تابع url() و مسیر فایل تصویر (که می‌تونه نسبی یا مطلق باشه، دقیقاً مشابه چیزی که در فصل ۱ با مسیر فایل CSS دیدیم) نوشته می‌شه.

رفتار پیش‌فرض background-image

.box {
  width: 400px;
  height: 200px;
  background-image: url("pattern.png");
}

به‌طور پیش‌فرض، اگه تصویر کوچک‌تر از فضای عنصر باشه، این تصویر به‌طور خودکار به‌صورت افقی و عمودی تکرار (Repeat) می‌شه تا کل فضا رو پر کنه. اگه تصویر بزرگ‌تر از فضای عنصر باشه، فقط بخشی از تصویر (از گوشه بالا-چپ) که در فضای موجود جا می‌گیره، نمایش داده می‌شه. کنترل دقیق این رفتار (تکرار، اندازه، موقعیت) رو در درس‌های بعدی همین فصل با جزئیات کامل بررسی می‌کنیم.

ترکیب همزمان background-color و background-image

.card {
  background-color: #f5f5f5;
  background-image: url("icon.svg");
}

وقتی هر دو Property هم‌زمان تعریف بشن، تصویر همیشه روی رنگ پس‌زمینه قرار می‌گیره؛ یعنی رنگ در لایه‌ی پایین‌تر، و تصویر در لایه‌ی بالاتر رسم می‌شه. اگه تصویر شفافیت داشته باشه (مثل یک فایل PNG یا SVG با پس‌زمینه شفاف)، رنگ زیرین از میان قسمت‌های شفاف تصویر دیده می‌شه.

چرا تعریف همزمان background-color مفید است؟

.hero {
  background-color: #2c3e50;
  background-image: url("hero-photo.jpg");
}

یکی از دلایل رایج تعریف هم‌زمان یک رنگ پس‌زمینه، در کنار تصویر، اینه که تا زمانی که تصویر کامل بارگذاری نشده (که ممکنه به‌خاطر سرعت اینترنت کاربر طول بکشه)، رنگ پس‌زمینه به‌عنوان یک جایگزین موقت نمایش داده می‌شه؛ این کار از نمایش یک فضای کاملاً سفید و خالی در حین بارگذاری تصویر جلوگیری می‌کنه. همچنین، اگه به هر دلیلی (مثل مسیر اشتباه یا مشکل شبکه) تصویر اصلاً بارگذاری نشه، همچنان یک پس‌زمینه رنگی قابل‌قبول باقی می‌مونه.

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

.layered {
  background-image: url("overlay.png"), url("photo.jpg");
}

Property به اسم background-image می‌تونه چند تصویر رو، با کاما از هم جدا، هم‌زمان بپذیره. این تصاویر، از بالا به پایین در لیست، به‌ترتیب از بالاترین لایه به پایین‌ترین لایه چیده می‌شن؛ یعنی در این مثال، overlay.png روی photo.jpg قرار می‌گیره. جزئیات کامل کنترل هر لایه (موقعیت، اندازه، تکرار) به‌طور مستقل، در درس‌های بعدی همین فصل بررسی می‌شه.

none: حذف تصویر پس‌زمینه

.no-image {
  background-image: none;
}

مقدار none، مقدار پیش‌فرض این Property‌ه و به این معنیه که هیچ تصویری به‌عنوان پس‌زمینه استفاده نشه. این مقدار معمولاً برای Override کردن یک background-image که قبلاً (مثلاً از طریق یک Class دیگه یا در یک حالت مختلف مثل Responsive) تعریف شده، به‌کار می‌ره.

شورت‌هند background

.box {
  background: #f0f8ff url("pattern.png") no-repeat center / cover;
}

Property به اسم background در واقع یک شورت‌هند برای تمام Propertyهای مرتبط با پس‌زمینه‌ست، از جمله background-color، background-image، و بقیه Propertyهایی که در درس‌های بعدی همین فصل (مثل background-position، background-repeat، background-size) به‌طور کامل بررسی‌شون می‌کنیم. استفاده از این شورت‌هند، نوشتن CSS رو کوتاه‌تر می‌کنه، ولی نیاز به دونستن دقیق ترتیب و نحوه نوشتن هر بخش داره.

یک مثال کامل ترکیبی

.profile-card {
  background-color: #ecf0f1;
  background-image: url("subtle-pattern.svg");
}

.hero-banner {
  background-color: #34495e;
  background-image: url("banner.jpg");
}

<div class="profile-card">اطلاعات کاربر</div>
<div class="hero-banner">بخش معرفی اصلی سایت</div>

در این مثال، هر دو عنصر ترکیبی از یک رنگ پایه و یک تصویر دارن؛ رنگ به‌عنوان پشتیبان و پایه، و تصویر به‌عنوان لایه بصری اصلی روی اون.

نکات مهم

• background-color هم ناحیه Content و هم Padding را پوشش می‌دهد، ولی هرگز Margin را.
• وقتی background-color و background-image هر دو تعریف شوند، تصویر همیشه روی رنگ قرار می‌گیرد.
• background-image می‌تواند چند تصویر را هم‌زمان (با کاما جدا شده) بپذیرد که به‌ترتیب از بالاترین به پایین‌ترین لایه چیده می‌شوند.

اشتباهات رایج

• فراموش کردن تعریف یک background-color جایگزین، در حالی که تصویر پس‌زمینه ممکن است دیر بارگذاری شود یا اصلاً بارگذاری نشود.
• تصور اینکه background-color به ناحیه Margin هم گسترش پیدا می‌کند.
• استفاده نادرست از شورت‌هند background، بدون توجه به ترتیب و قواعد دقیق نوشتن هر بخش آن.

جمع‌بندی

background-color رنگ پشت یک عنصر (شامل Content و Padding) را تعیین می‌کند و background-image یک یا چند تصویر را به‌عنوان پس‌زمینه اضافه می‌کند؛ تصاویر همیشه روی رنگ پس‌زمینه قرار می‌گیرند. تعریف هم‌زمان یک رنگ پایه در کنار تصویر، یک روش رایج و مفید برای بهبود تجربه کاربری در حین بارگذاری تصویر است.