نمونه کد

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

آزمایشگاه

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

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

اطلاعات

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

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

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

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

شیوه نگارش

مقادیر

مقادیر توضیحات
left top ، left center ، left bottom right top ، right center ، right bottom ، center top ، center center ، center bottom اگر فقط از یک کلمه کلیدی استفاده کنید، مقادیر دیگر در مرکز قرار خواهند گرفت.
x% y% اولین مقدار ، موقعیت افقی و دومین مقدار نیز عمودی میباشد. گوشه سمت چپ بالا 0٪ 0٪ است. گوشه پایین سمت راست 100% 100% است. اگر فقط یک مقدار را مشخص کنید، مقدار دیگر 50٪ خواهد بود. مقدار از پیش تأیین شده : 0% 0% است
xpos ypos اولین مقدار ، موقعیت افقی و دومین مقدار نیز موقعیت عمودی میباشد. گوشه سمت چپ بالا 0 0 است. واحدها می توانند پیکسل (0px 0px) یا هر واحد CSS دیگری باشند. اگر فقط یک مقدار را مشخص کنید، مقدار دیگر 50٪ خواهد بود. شما می توانید درصد و موقعیت ها را ادغام کنید
initial این خصوصیت را به مقدار از پیش تأیین شده خودش برمیگرداند
inherit این خصوصیت را از عنصر اصلی خود به ارث میبرد

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

نمونه کد

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

آزمایشگاه

نمونه کد

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

آزمایشگاه

نمونه کد

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

آزمایشگاه

نمونه کد

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

آزمایشگاه

نمونه کد

:برای ایجاد یک تصویر "مطلوب" از ویژگی های پس زمینه مختلف استفاده کنید

آزمایشگاه