خاصية موضع الخلفية
آخر تحديث: 2026-09-13
background-position خاصية موضع الخلفية
تحدد الخاصية background-position الموضع الأولي لصورة الخلفية داخل العنصر، وهو افتراضياً الزاوية العلوية اليسرى (0% 0%). تقبل كلمات مفتاحية (left وcenter وright وtop وbottom) وقيم طول ونسباً مئوية. تُستخدم عادةً مع background-image لتموضع الخلفية بدقة.
| الفئة | |
|---|---|
| القيمة الأولية | 0% 0% |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | length |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
background-position: <position>{1,4};⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
left | center | right | top | bottom | كلمة مفتاحية | كلمات مفتاحية للموضع معرّفة مسبقاً |
<length> | <percentage> | النوع | قيم موضع صريحة |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-position | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： مع النسب المئوية، يكون background-position: 100% 100% مكافئاً لـ right bottom.
تلميح： يمكن للقيم السالبة تموضع صورة الخلفية خارج العنصر، وهي تقنية شائعة في CSS sprites.
❓ الأسئلة الشائعة
Qكيف أوسّط صورة خلفية؟
Aاستخدم background-position: center; أو background-position: 50% 50%; — كلاهما يوسّط الصورة أفقياً ورأسياً داخل الحاوية، بما أن الكلمة المفتاحية center تكافئ 50% 50%. ادمجها مع background-repeat: no-repeat حتى لا تتجانب الصورة.
Qما الفرق بين قيمة واحدة وقيمتين في background-position؟
Aمع قيمة واحدة، يكون الاتجاه غير المحدد هو center افتراضياً، لذا فإن background-position: left تكافئ left center. مع قيمتين، يضبط الأول المحور الأفقي والثاني المحور الرأسي، مثل center top. تُدعم أيضاً صيغة الإزاحة، مثل right 20px bottom 10px التي تتموضع بالنسبة للزاوية السفلية اليمنى.
Qما الفرق بين التموضع بالنسب المئوية والبكسل؟
Aمع النسب المئوية، يتم محاذاة النقطة المطابقة للصورة مع النقطة المطابقة للحاوية: 50% 50% تُحاذي مركز الصورة مع مركز الحاوية. مع البكسل، يُزاح الركن العلوي الأيسر للصورة بمقدار ثابت عن الركن العلوي الأيسر للحاوية. استخدم 100% أو right 0 لدفع الصورة إلى اليمين، وصيغة الإزاحة مثل right 10px للمسافات الدقيقة.
Qكيف أستخدم background-position لـ CSS sprites؟
Aيحزم السبرايت عدة أيقونات في صورة واحدة ويستخدم background-position سالباً لإزاحة الكشف عن الشريحة المطلوبة. بالنسبة لأيقونات 32px، يكون الثاني background-position: -32px 0. عند التحجيم بـ background-size، حوّل الإزاحات تبعاً لذلك. يجري استبدال هذه التقنية تدريجياً بخطوط الأيقونات وSVG المضمّن.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
