تصویر زمینه در CSS – ویژگی background-image

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

نحوه تعیین تصویر بکگراند و استفاده از ویژگی background-image

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

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

نتیجه قانون فوق روی سندی شامل یک هدینگ و پاراگراف فرضی مشابه با تصویر زیر است. همانطور که می‌بینید به صورت پیشفرض تصویر زمینه از گوشه بالا سمت چپ المان رسم می‌شود و طوری در راستاهای افقی و عمودی تکرار می‌شود که تمام فضای المان را پر کند. (این وضعیت پیشفرض با کمک ویژگی‌های background-position و background-repeat قابل تغییر است).

شما می‌توانید از رنگ‌های شیب دار (Gradient) هم به عنوان تصویر زمینه استفاده کنید. نمونه یک رنگ آمیزی شیب دار خطی با کمک تابع linear-gradient() را در مثال زیر مشاهده می‌کنید:

body {
  background-image: linear-gradient(#004dff, #4467b7, #004dff);
}

نتیجه قانون فوق نیز چیزی مشابه با نمونه زیر خواهد بود:

برای تعیین چند تصویر زمینه برای یک المان می‌توانید آن‌ها را با کمک یک کاما مشابه با مثال زیر از هم جدا کنید:

body {
  background-image: url("heart.png"), url("leaf.png"), linear-gradient(#004dff, #4467b7, #004dff);
}

نتیجه این مثال را هم در تصویر زیر مشاهده می‌کنید:

بیشتر بخوانید: تکرار تصویر زمینه در CSS – ویژگی background-repeat

چند نکته در مورد تصویر پس زمینه در CSS

نکته 1: هنگام تعیین تصویر زمینه همانند رنگ زمینه مراقب باشید رنگ های تصویر و متن به شکلی باشند که متن المان به آسانی قابل خواندن باشد.

بیشتر بخوانید: رنگ متن در CSS – ویژگی color

بیشتر بخوانید: رنگ زمینه در CSS – ویژگی background-color

نکته 2: پیشنهاد می‌شود همواره علاوه بر تصویر زمینه، رنگ زمینه هم مشخص شود. این موضوع حتی در مواردی که تصویر زمینه مانع از مشاهده رنگ زمینه در حالت عادی می‌شود اهمیت دارد. به این ترتیب اگر به هر دلیلی (نظیر در دسترس نبودن فایل تصویر)، امکان لود تصویر زمینه وجود نداشته باشد رنگ زمینه به عنوان جایگزین یا Fallback نمایش داده می‌شود. معمولا رنگ زمینه مطابق با رنگ غالب در تصویر یا یکی از رنگ‌های Gradient انتخاب می‌شود.

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

نکته 4: زمانی که با کمک ویژگی background-image چند تصویر زمینه برای یک المان مشخص می‌کنید اولین تصویر روی سایر تصاویر رسم می‌شود و الی آخر. (نمونه این وضعیت را در مثال سوم مشاهده می‌کنید. در این مثال، تصویر پس‌زمینه اول یا قلب روی تصویر پس‌زمینه دوم یا برگ و پشت تمام آن‌ها رنگ‌آمیزی شیب‌دار رسم شده است). رنگ زمینه هم پشت تمام تصاویر پس‌زمینه قرار می‌گیرد و خط border روی تصاویر پس زمینه رسم می‌شود.

بازگشت به فهرست مجموعه آموزشی CSS