سبد (0)

خصوصیت background-position

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

چگونگی مکان دهی عکس پس زمینه:

body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
خودتان امتحان کنید »

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

با استفاده از خصوصیت background-position، می توانید مکان شروع قرارگیری عکس پس زمینه را مشخص نمایید.

توجه: برای اینکه این خصوصیت در مرورگرهای Firefox و Opera کار کند، باید خصوصیت background-attachment را با مقدار "fixed" تنظیم نمایید.

مقدار پیشفرض 0% 0%
ارث بری خیر
نسخه CSS1
JavaScript ساختار object.style.backgroundPosition="center"

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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


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

مقدار توضیحات نمایش دادن
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
اگر تنها یک keyword را مشخص نماید، قسمت دوم با مقدار "center" تنظیم خواهد شد. نمایش دادن »
x% y% مقدار اول مکان افقی و مقدار دوم مکان عمودی را مشخص می کند. گوشه بالا سمت چپ، 0% 0% است و گوشه پایین سمت راست 100% 100% است. اگر تنها یک مقدار را مشخص نمایید، قسمت دوم با مقدار "50%" تنظیم خواهد شد. (مقدار پیشفرض 0% 0%) نمایش دادن »
xpos ypos مقدار اول مکان افقی و مقدار دوم مکان عمودی را مشخص می کند. گوشه بالا سمت چپ، 0 0 است. واحد اعداد می تواند پیکسل یا هر واحد دیگری در CSS باشد (CSS Units). اگر تنها یک مقدار را مشخص نمایید، قسمت دوم با مقدار "50%" تنظیم خواهد شد. نمایش دادن »
inherit تعیین می کند که باید از والدش، ارث بری داشته باشد.  

مثالs

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

مکان دهی عکس پس زمینه
این مثال نشان می دهد که چگونه عکس پس زمینه را در صفحه مکان دهی نماییم.

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

مکان دهی عکس پس زمینه با استفاده از پیکسل
این مثال نشان می دهد که چگونه با استفاده از واحد پیکسل، عکس پس زمینه را مکان دهی نماییم.


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

Styling Backgrounds (بیاموز CSS)

background-image(مرجع خصوصیت های CSS)

HTML DOM reference: backgroundPosition property

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