background codoloper

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

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

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

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


مثال: تنظیم تصویر پس‌زمینه برای کل صفحه

در مثال زیر، تصویری با نام paper.gif به‌عنوان پس‌زمینه عنصر <body> (کل صفحه) تنظیم شده است:

 

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

مثال: ترکیب نامناسب تصویر و متن

در این مثال، تصویر پس‌زمینه انتخاب‌شده باعث شده خوانایی متن کاهش یابد و متن به‌سختی قابل مشاهده باشد:

body {
  background-image: url("bgdesert.jpg");
}
 نکته: هنگام استفاده از تصویر پس‌زمینه، حتماً تصویری انتخاب کنید که باعث اختلال در خوانایی متن نشود. تصاویر با کنتراست بالا یا جزئیات زیاد ممکن است خواندن متن را دشوار کنند.

تنظیم تصویر پس‌زمینه برای عناصر خاص

علاوه بر عنصر <body>، می‌توان تصویر پس‌زمینه را برای سایر عناصر HTML مانند <p> نیز تنظیم کرد.

مثال:

p {
  background-image: url("paper.gif");
}
 

جدول ویژگی background-image در CSS

ویژگیتوضیح
background-imageتصویری را به‌عنوان پس‌زمینه یک عنصر تنظیم می‌کند