تنظیم Style backgroundPosition

تعریف و استفاده

backgroundPosition تنظیم یا بازگرداندن موقعیت تصویر پس‌زمینه در داخل عنصر.

لطفاً به:

طراحی HTML:خصوصیت background

آموزش CSS:背景 CSS

آموزش CSS3:پس‌زمینه CSS3

دستورالعمل CSS:خصوصیت background-image

دستورالعمل CSS:خصوصیت background-position

مثال

مثال 1

موقع تصویر پس‌زمینه‌ی را تغییر دهید:

document.body.style.backgroundPosition = "top right";

آزمایش شخصی

مثال 2

موقع تصویر پس‌زمینه‌ی عناصر <div> را به وسط پایین تغییر دهید:

document.getElementById("myDiv").style.backgroundPosition = "center bottom";

آزمایش شخصی

مثال 3

موقعیت تصویر پس‌زمینه عناصر <div> را به افقی 200 پیکسل و عمودی 40 پیکسل تغییر دهید:

document.getElementById("myDiv").style.backgroundPosition = "200px 40px";

آزمایش شخصی

مثال 4

موقعیت تصویر پس‌زمینه در عناصر <div> بازگشتی:

document.getElementById("myDiv").style.backgroundPosition;

آزمایش شخصی

قانون‌نویسی

بازگشتی از ویژگی backgroundPosition:

object.style.backgroundPosition

تنظیم ویژگی backgroundPosition:

object.style.backgroundPosition = value

مقدار ویژگی

مقدار توضیح
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right
 اگر شما تنها یک کلمه کلیدی را مشخص کنید، مقدار دیگر "center" خواهد بود.
x% y%

مقدار x نشان‌دهنده موقعیت افقی است و مقدار y نشان‌دهنده موقعیت عمودی است.

گوشه بالا چپ 0% 0% است. گوشه پایین راست 100% 100% است.

اگر شما تنها یک مقدار را مشخص کنید، مقدار دیگر 50% خواهد بود.
xpos ypos

مقدار x نشان‌دهنده موقعیت افقی است و مقدار y نشان‌دهنده موقعیت عمودی است.

گوشه بالا چپ 0 0 است. واحدها می‌تواند پیکسل (0px 0px) یا هر واحد دیگر CSS باشد.

اگر شما تنها یک مقدار را مشخص کنید، مقدار دیگر 50% خواهد بود. شما می‌توانید از ترکیب % و واحدها استفاده کنید.
initial این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. لطفاً به initial.
inherit این ویژگی را از عنصر والد خود ارث می‌برد. لطفاً به inherit.

جزئیات فنی

مقدار پیش‌فرض: 0% 0%
مقدار بازگشتی: یک رشته است که موقعیت تصویر پس‌زمینه را نشان می‌دهد.
نسخه CSS: CSS1

پشتیبانی مرورگر

backgroundPosition این یک ویژگی CSS1 (1996) است.

همه مرورگرها این را به طور کامل پشتیبانی می‌کنند:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی