سبد (0)

خصوصیت background-image

مثال (خصوصیت background-image)

تنظیم عکس پس زمینه، برای عنصر <body>:

body
{
background-image:url('paper.gif');
background-color:#cccccc;
}
خودتان امتحان کنید »

تعریف و کاربرد

با استفاده از خصوصیت background-image، می توانید برای یک عنصر، یک یا چند عکس پس زمینه تنظیم نمایید.

پس زمینه یک عنصر، شامل content و border و padding است. (margin شامل پس زمینه نمی شود)

بصورت پیشفرض، عکس پس زمینه در گوشه بالا سمت چپ قرار می گیرد و همچنین در دو جهت عمودی و افقی تکرار می شود.

مقدار پیشفرض none
ارث بری خیر
نسخه CSS1
JavaScript ساختار object.style.backgroundImage="url(stars.gif)"

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

تمام مرورگرهای اصلی، خصوصیت background-image را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، تنظیم چند پس زمینه برای یک عنصر را پشتیبانی نمی کند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.


نکته ها و ترفندها

نکته: بدلیل اینکه ممکن است عکس پس زمینه، قابل دسترس نباشد، همیشه یک background-color تنظیم نمایید.


مقدارهای خصوصیت

مقدار توضیحات
url('URL') URL عکس پس زمینه، برای تنظیم بیشتر از یک عکس، URLها را با کاما از هم جدا نمایید.
none هیچ عکسی بعنوان پس زمینه نمایش داده نمی شود. (مقدار پیشفرض)
inherit تعیین می کند که باید از والدش، ارث بری داشته باشد.

مثالs

مثال - خودتان امتحان کنید

تنظیم چند عکس پس زمینه

تنظیم چند عکس پس زمینه برای عنصر <body>.


بیاموزهای مرتبط

Styling Backgrounds (بیاموز CSS)

CSS3 Background (بیاموز CSS3)

HTML DOM reference: backgroundImage property

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه