خصوصیت background-position
مثال (خصوصیت background-position)
چگونگی مکان دهی عکس پس زمینه:
{
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 | تعیین می کند که باید از والدش، ارث بری داشته باشد. |
مثال - خودتان امتحان کنید
مکان دهی عکس پس زمینه
این مثال نشان می دهد که چگونه عکس پس زمینه را در صفحه مکان دهی نماییم.
مکان دهی عکس پس زمینه با استفاده از درصد
این مثال نشان می دهد که چگونه با استفاده از واحد درصد، عکس پس زمینه را مکان دهی نماییم.
مکان دهی عکس پس زمینه با استفاده از پیکسل
این مثال نشان می دهد که چگونه با استفاده از واحد پیکسل، عکس پس زمینه را مکان دهی نماییم.
بیاموزهای مرتبط
Styling Backgrounds (بیاموز CSS)
background-image(مرجع خصوصیت های CSS)
- نوشته شده توسط elham
- بازدید: 10515
