خصائص backgroundPosition Style

التعريف والاستخدام

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

قيمة الخصوصية

القيمة الوصف
  • الأعلى الأيسر
  • الأعلى الوسط
  • الأعلى الأيمن
  • الوسط الأيسر
  • الوسط الوسط
  • الوسط الأيمن
  • الأسفل الأيسر
  • الأسفل الوسط
  • الأسفل الأيمن
 إذا كنت تُحدد كلمة مفتاحية واحدة فقط، فإن القيمة الأخرى ستكون "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
دعم دعم دعم دعم دعم دعم