نمونه کد

مثالی برای موقعیت قرار گیری تصویر پس زمینه روی محور x:

آزمایشگاه

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

خصوصیت background-position-x موقعیت عکس پس زمینه را روی محور x مشخص میکند.

اطلاعات

# توضیحات
مقدار پیشفرض 0%
ارث بری خیر
انیمیشن بله
نسخه CSS3
نگارش JS object.style.backgroundPositionX="center"

سازگاری با مرورگر

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

# کروم ادج فایرفاکس سافاری اپرا
background-position-x

شیوه نگارش

مقادیر

مقادیر توضیحات
left در این حالت پس زمینه در سمت چپ محور x قرار دارد.
right در این حالت پس زمینه در سمت راست محور x قرار دارد.
center در این حالت پس زمینه در مرکز محور x قرار دارد.
x% سمت چپ محور 0 درصد و سمت راست محور 100 درصد می باشد.
xpos نشان دهنده فاصله افقی از سمت چپ میباشد.واحد ها میتوانند پیکسل، یا هر واحد دیگری در CSS باشند.
xpos offset xpos بر روی طرف های چپ و راست تنظیم شده است.
initial این خصوصیت را به مقدار از پیش تأیین شده خودش برمیگرداند.
inherit این خصوصیت را از عنصر اصلی خود به ارث میبرد.

نمونه کد های بیشتر

نمونه کد

نحوه قرار گیری عکس پس زمینه در سمت راست:

آزمایشگاه

نمونه کد

:نحوه قرار گیری عکس پس زمینه با استفاده از درصد

آزمایشگاه

نمونه کد

:نحوه قرار گیری عکس پس زمینه با استفاده از پیکسل

آزمایشگاه

نمونه کد

از خصوصیت های مختلف پس زمینه برای ساخت عکس پس زمینه ای که فضای داخلی خود را پوشش میدهد استفاده کنید:

آزمایشگاه

صفحات مرتبط

آموزش CSS: پس زمینه CSS

مرجع CSS: خصوصیت عکس پس زمینه 

مرجع CSS: ویژگی background-position

مرجع CSS: ویژگی background-position-y

مرجع HTML DOM: ویژگی backgroundPosition