نمونه کد
مثالی برای حالت قرار گیری عکس پس زمینه روی محور x:
آزمایشگاه
تعریف و کاربرد
خصوصیت background-position موقعیتی که در آن، عکس پس زمینه شروع میشود را مشخص میکند.
سازگاری با مرورگر
اعداد نوشته شده در جدول نسخه ای از مرورگر را مشخص می کنند که به طور کامل قابلیت پشتیبانی از خصوصیت 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
|
این خصوصیت را از عنصر اصلی خود به ارث میبرد
|
نمونه کد های بیشتر
نمونه کد
نحوه قرار دادن یک تصویر پس زمینه برای قرار گرفتن در مرکز قسمت بالا:
آزمایشگاه
نمونه کد
نحوه قرار دادن یک عکس پس زمینه به سمت راست پایین:
آزمایشگاه
نمونه کد
نحوه قرار دادن یک عکس پس زمینه با استفاده از درصد:
آزمایشگاه
نمونه کد
نحوه قرار دادن یک عکس پس زمینه با استفاده از پیکسل:
آزمایشگاه
نمونه کد
:برای ایجاد یک تصویر "مطلوب" از ویژگی های پس زمینه مختلف استفاده کنید
آزمایشگاه