مدخل إلى تَموضُع الخلفيّة (Background Positioning) في CSS

يُعَدّ التحكم في خصائص الخلفية من العناصر المحورية في تصميم الواجهات باستخدام CSS، ومن بين هذه الخصائص تبرز خاصية background-position التي تمنح المطوّر إمكانيات دقيقة لتحديد موضع صورة الخلفية داخل العنصر. يهدف هذا المقال إلى تقديم شرح موسّع ومفصّل حول خاصية background-position، وذلك من خلال التطرق إلى بنيتها، وحدودها، واستخداماتها العملية، بالإضافة إلى الأمثلة المتقدمة والحالات الخاصة التي تُظهر أهميتها في بناء واجهات بصرية متكاملة واحترافية.

أولًا: الأساس النظري لخاصية background-position

خاصية background-position تُستخدم لتحديد موقع صورة الخلفية داخل العنصر الذي تحتويه. يمكن ضبط هذا الموضع باستخدام كلمات مفتاحية (مثل top, right, bottom, left, center) أو باستخدام وحدات القياس مثل النسب المئوية (%) أو وحدات الطول الثابتة (مثل px, em, rem).

البنية العامة

css
CopyEdit
background-position:  ;

• x-position: تمثل المحور الأفقي (اليسار ↔ اليمين).

• y-position: تمثل المحور العمودي (الأعلى ↕ الأسفل).

على سبيل المثال:

css
CopyEdit
background-position: left top;
background-position: 50% 50%;
background-position: 10px 20px;

في حال تم تحديد قيمة واحدة فقط، فإن القيمة الثانية تُفسّر تلقائيًا على أنها center. فعلى سبيل المثال:

css
CopyEdit
background-position: right;

تُفسَّر على أنها:

css
CopyEdit
background-position: right center;

ثانيًا: استخدام الكلمات المفتاحية

تُتيح الكلمات المفتاحية إمكانية تعيين موضع الخلفية بطريقة واضحة وقابلة للقراءة. وتشمل هذه الكلمات:

• left, center, right للمحور الأفقي.

• top, center, bottom للمحور العمودي.

أمثلة تطبيقية:

css
CopyEdit
background-position: top left;
background-position: center center;
background-position: right bottom;

هذا النوع من التحديد يُستخدم بكثرة في التنسيقات السريعة التي لا تحتاج إلى دقة بصرية عالية، بل تهدف إلى توفير مظهر مبدئي أو استرشادي.

ثالثًا: استخدام القيم النسبية والمطلقة

عند الرغبة في دقة أكبر، يمكن استخدام وحدات قياس أكثر تخصصًا:

وحدات الطول:

• px (بيكسل)

• em (نسبة إلى حجم الخط الحالي)

• rem (نسبة إلى الجذر html)

• vh, vw (نسبة إلى أبعاد نافذة العرض)

النسبة المئوية:

• تحدد الموضع كنسبة من أبعاد العنصر الأب.

مثال:

css
CopyEdit
background-position: 25% 75%;

هذا يعني أن صورة الخلفية تبدأ من ربع عرض العنصر و75% من ارتفاعه.

مقارنة بين القيم المختلفة:

رابعًا: علاقة background-position مع background-size وbackground-repeat

تتداخل خاصية background-position مع خصائص أخرى تحدد كيفية عرض الخلفية، وأهمها:

1. background-size

تتحكم في حجم صورة الخلفية. عند استخدام هذه الخاصية، تصبح قيمة background-position حاسمة لضمان محاذاة الصورة في المكان الصحيح بعد تعديل حجمها.

مثال:

css
CopyEdit
background-size: 100px 100px;
background-position: center center;

2. background-repeat

تحدد ما إذا كانت صورة الخلفية ستتكرر تلقائيًا داخل العنصر أو لا. عند تعطيل التكرار (no-repeat)، تصبح background-position هي الوسيلة الوحيدة لتحديد موضع الصورة.

مثال:

css
CopyEdit
background-repeat: no-repeat;
background-position: right top;

خامسًا: الاستخدام في التصميم المتجاوب (Responsive Design)

في التصميم المتجاوب، تُستخدم خاصية background-position لتعديل موضع الخلفية بحسب حجم الشاشة أو الجهاز، وغالبًا ما يتم ربطها بالوسائط الشرطية (Media Queries).

css
CopyEdit
@media (max-width: 768px) {
  .hero {
    background-position: center top;
  }
}

@media (min-width: 769px) {
  .hero {
    background-position: right center;
  }
}

بهذا الشكل، تتغير الخلفية بحسب الجهاز المستخدم، مما يتيح تجربة بصرية محسنة لجميع المستخدمين.

سادسًا: التمركز بناءً على اتجاه الكتابة (Directionality)

عند تصميم مواقع متعددة اللغات، خصوصًا تلك التي تستخدم اللغات ذات الاتجاه من اليمين إلى اليسار (مثل العربية)، يجب الانتباه إلى كيفية تفاعل background-position مع خاصية direction.

css
CopyEdit
body {
  direction: rtl;
  background-position: right top;
}

في هذه الحالة، موضع الصورة يكون محسوبًا من اليمين باعتباره بداية السطر، على عكس اللغات التي تبدأ من اليسار.

سابعًا: تعيين عدة صور خلفية وتحديد مواضعها

يُتيح CSS أيضًا استخدام أكثر من صورة كخلفية لعنصر واحد. عند ذلك، تُستخدم الفاصلة لتحديد المواضع المختلفة لكل صورة:

css
CopyEdit
background-image: url('image1.png'), url('image2.png');
background-position: top left, bottom right;

هذا يضع