خاصية أصل الخلفية
آخر تحديث: 2026-09-13
background-origin خاصية أصل الخلفية
تحدد الخاصية background-origin منطقة المرجع لتموضع صورة الخلفية، وتُقرر خط الأساس لـ background-position. القيمة الافتراضية padding-box تتموضع الخلفية بالنسبة لمنطقة الحشو، وborder-box بالنسبة لمنطقة الحدود، وcontent-box بالنسبة لمنطقة المحتوى. تُستخدم غالبًا مع background-clip.
| الفئة | |
|---|---|
| القيمة الأولية | padding-box |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | discrete |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
background-origin: border-box | padding-box | content-box;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
border-box | padding-box | content-box | كلمة مفتاحية | أصل تموضع الخلفية |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-origin | ✓ v4 | ✓ v12 | ✓ v4 | ✓ v3.1 | ✓ v10 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يؤثر background-origin في المكان الذي تبدأ منه صورة الخلفية، لكن ليس في المنطقة التي تُرسم عليها.
تلميح： عندما يكون background-attachment: fixed، يتم تجاهل background-origin لأن الخلفية مُتموضَعة بالنسبة لإطار العرض.
❓ الأسئلة الشائعة
Qكيف يعمل background-origin وbackground-clip معًا؟
Aيُقرر origin من أي صندوق تُتموضع صورة الخلفية، بينما يُقرر clip حتى أين يُرسم الخلفية؛ وهما مستقلان ويمكن ضبطهما بشكل منفصل. فمثلًا background-origin: content-box; background-clip: border-box; تُموضع الصورة من منطقة المحتوى لكن تُرسم حتى تحت الحدود. ومن الشائع ضبط الاثنين بنفس القيمة لكي يظهر الخلفية بالكامل من أصلها.
Qما القيمة الافتراضية لـ background-origin؟
Aالقيمة الافتراضية هي padding-box، أي أن صورة الخلفية تُموضَع من الزاوية العلوية اليسرى لمنطقة الحشو (حافة الحشو). وهذا يختلف عن القيمة الافتراضية لـ background-clip وهي border-box، وهو السبب الرئيسي لكثرة الخلط بينهما. عندما يكون background-attachment: fixed، يتم تجاهل origin لأن الخلفية تُموضَع حينها بالنسبة لإطار العرض.
Qمتى لا يكون لـ background-origin تأثير مرئي؟
Aثلاث حالات: عندما لا تكون للصورة background-position صريح وتبقى عند الافتراضي 0% 0%، تحتاج إلى حدود لرؤية أي فرق؛ وعندما يكون background-attachment: fixed يتم تجاهله؛ ولا يفعل شيئًا مع لون خلفية فقط (يؤثر origin على الصور فقط). لرؤية التأثير، أضف حدودًا مع صورة خلفية بنمط no-repeat وبدّل بين القيم الثلاث.
Qماذا تعني قيم background-origin الثلاث؟
Aborder-box: تُموضَع الصورة من الزاوية العلوية اليسرى لمنطقة الحدود ويمكن أن تمتد تحت الحدود. padding-box (الافتراضي): تُموضَع من الزاوية العلوية اليسرى لمنطقة الحشو، لذا لا تظهر صورة تحت الحدود. content-box: تُموضَع من الزاوية العلوية اليسرى لمنطقة المحتوى، فتبقى الصورة داخل منطقة المحتوى. وبالاقتران مع background-position، تتيح هذه القيم محاذاة صورة الخلفية إلى أي جزء من الصندوق.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
