خاصية اختصار الخلفية
آخر تحديث: 2026-09-13
background خاصية اختصار الخلفية
background هي اختصار لخصائص الخلفية، ما يتيح لك تعيين لون الخلفية وصورتها وموضعها وحجمها وتكرارها وغيرها في إعلان واحد. يُبقي الاختصار الكود موجزاً، وأي خاصية فرعية تُحذف تُعاد إلى قيمتها الافتراضية. إنها أحد أكثر الاختصارات استخداماً في CSS.
| الفئة | |
|---|---|
| القيمة الأولية | transparent none repeat scroll 0% 0% auto padding-box border-box |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | shadow |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
background: [<bg-color> || <bg-image> || <bg-repeat> || <bg-position> [ / <bg-size> ]? || <bg-attachment> || <bg-clip> || <bg-origin>];⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<bg-layer>*, <final-bg-layer> | القيمة | اختصار الخلفية |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： في الاختصار، يجب أن يأتي background-size بعد background-position ويفصل بينهما خط مائل، مثل center/cover.
تحذير： يُعيد الاختصار ضبط كل خاصية فرعية للخلفية غير محددة إلى قيمتها الأولية، مما قد يطغى على الإعدادات الفردية السابقة.
❓ الأسئلة الشائعة
Qهل أستخدم اختصار background أم أعيّن الخصائص الفرعية بشكل فردي؟
Aالاختصار أفضل لتعريف خلفية كاملة دفعة واحدة، فمثلاً background: #fff url(bg.jpg) no-repeat center/cover; موجز. الخصائص الفردية أكثر أماناً عندما تريد تغيير خاصية فرعية واحدة فقط (مثل background-size) دون إعادة ضبط البقية. لاحظ أن الاختصار يعيد ضبط الخصائص الفرعية المحذوفة إلى القيم الافتراضية، لذا 'الاختصار أولاً ثم الفردي' غالباً ما يسبب مفاجآت.
Qهل تهمّ ترتيب القيم في اختصار background؟
Aالترتيب مرن إلى حد كبير لأن المتصفحات تحدد القيم حسب النوع، لكن هناك قاعدتين إلزاميتين: يجب أن يأتي background-size مباشرة بعد الموضع ويفصل بخط مائل (مثل center/cover)، ويجب أن يأتي background-color في النهاية. الترتيب الموصى به هو اللون، ثم الصورة، ثم التكرار، ثم الموضع/الحجم.
Qكيف أجعل صورة الخلفية تغطي العنصر بالكامل باستخدام الاختصار؟
Aسطر واحد يكفي: background: #333 url(photo.jpg) no-repeat center/cover;. وهو يكافئ تعيين لون الخلفية والصورة وno-repeat والتوسيط الأفقي والرأسي وحجم cover الذي يملأ الحاوية مع الحفاظ على النسبة. هذه هي الصيغة القياسية لخلفيات اللافتات والبطاقات — موجزة ويصعب الخطأ فيها.
Qما الخصائص الفرعية التي يعيد اختصار background ضبطها؟
Aكل ما لا تكتبه صراحةً يُعاد إلى قيمته الأولية: image إلى none، وrepeat إلى repeat، وposition إلى 0% 0%، وsize إلى auto، وattachment إلى scroll، وclip إلى border-box، وorigin إلى padding-box. لذا تجنّب مزج أنماط 'الاختصار ثم الفردي' لخصائص الخلفية الفرعية.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
