خصوصیت background-image
مثال (خصوصیت background-image)
تنظیم عکس پس زمینه، برای عنصر <body>:
{
background-image:url('paper.gif');
background-color:#cccccc;
}
تعریف و کاربرد
با استفاده از خصوصیت background-image، می توانید برای یک عنصر، یک یا چند عکس پس زمینه تنظیم نمایید.
پس زمینه یک عنصر، شامل content و border و padding است. (margin شامل پس زمینه نمی شود)
بصورت پیشفرض، عکس پس زمینه در گوشه بالا سمت چپ قرار می گیرد و همچنین در دو جهت عمودی و افقی تکرار می شود.
| مقدار پیشفرض | none |
|---|---|
| ارث بری | خیر |
| نسخه | CSS1 |
| JavaScript ساختار | object.style.backgroundImage="url(stars.gif)" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت background-image را پشتیبانی می کنند.
توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، تنظیم چند پس زمینه برای یک عنصر را پشتیبانی نمی کند.
توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.
نکته ها و ترفندها
نکته: بدلیل اینکه ممکن است عکس پس زمینه، قابل دسترس نباشد، همیشه یک background-color تنظیم نمایید.
مقدارهای خصوصیت
| مقدار | توضیحات |
|---|---|
| url('URL') | URL عکس پس زمینه، برای تنظیم بیشتر از یک عکس، URLها را با کاما از هم جدا نمایید. |
| none | هیچ عکسی بعنوان پس زمینه نمایش داده نمی شود. (مقدار پیشفرض) |
| inherit | تعیین می کند که باید از والدش، ارث بری داشته باشد. |
مثال - خودتان امتحان کنید
تنظیم چند عکس پس زمینه برای عنصر <body>.
بیاموزهای مرتبط
Styling Backgrounds (بیاموز CSS)
CSS3 Background (بیاموز CSS3)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 9182
