خصوصیت 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"

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

    

تمام مرورگرهای اصلی، خصوصیت 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 تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  

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

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

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

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