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

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

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

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

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

لینک های اصلی

مرجع CSS