شرح الخلفيات في CSS — كيف تتحكم في لون وصورة الخلفية باحتراف؟

الخلفية في CSS ليست مجرد لون. يمكنك وضع لون، صورة، تدرج، وتحديد طريقة تكرار الصورة وحجمها وتموضعها.

إذا كنت تبحث عن شرح background في CSS أو كيفية وضع صورة خلفية في CSS أو الفرق بين background-color و background-image، فهذا الدرس يغطي الأساس العملي.

ما هي الخلفيات في CSS؟

الخلفية هي الطبقة التي تظهر خلف محتوى العنصر (النصوص، الصور، الأزرار). في CSS نتحكم بها عبر خصائص أشهرها:

• background-color لتحديد لون الخلفية.
• background-image لإضافة صورة خلفية.
• background-repeat للتحكم في تكرار الصورة.
• background-position لتحديد مكان الصورة.
• background-size لتحديد حجم الصورة.
• background كصيغة مختصرة تجمع كل ما سبق.

التعريف البسيط: خصائص الخلفية في CSS تتحكم بكل ما يظهر خلف العنصر، من اللون البسيط إلى الصورة الكاملة.

تغيير لون الخلفية باستخدام background-color في CSS

body {
    background-color: #f8fafc;
}

.box {
    background-color: #bbf7d0;
}

ماذا يفعل هذا الكود؟ يضع لوناً فاتحاً لخلفية الصفحة، ولوناً أخضر فاتحاً للصندوق .box.

سطر بسطر:

• body: يستهدف الصفحة بالكامل.
• .box: يستهدف العناصر التي تحمل class باسم box.

النتيجة المتوقعة: فصل بصري واضح بين خلفية الصفحة وخلفية الصناديق الداخلية.

خطأ شائع: اختيار لون نص قريب من لون الخلفية فيضعف التباين.

إضافة صورة خلفية باستخدام background-image في CSS

.hero {
    background-image: url("hero-pattern.png");
}

ماذا يفعل هذا الكود؟ يضيف صورة كخلفية للعنصر .hero.

سطر بسطر:

• url(...): تحدد مسار ملف الصورة.
• الصورة تظهر خلف المحتوى وليس فوقه.

النتيجة المتوقعة: العنصر يأخذ طابعاً بصرياً غنيّاً دون تغيير محتواه النصي.

خطأ شائع: مسار صورة خاطئ، فتظهر الخلفية فارغة.

الخاصية المختصرة background في CSS

بدل كتابة كل خاصية في سطر مستقل، يمكنك جمعها في سطر واحد.

.banner {
    background: #ffffff url("img.png") no-repeat right top / 140px;
}

ماذا يفعل هذا الكود؟ يحدد لون خلفية وصورة بدون تكرار مع تموضع أعلى اليمين وحجم 140px.

سطر بسطر:

• #ffffff: لون الخلفية.
• url("img.png"): صورة الخلفية.
• no-repeat: عدم تكرار الصورة.
• right top: مكان الصورة.
• / 140px: حجم الصورة.

النتيجة المتوقعة: كود أقصر وتحكم كامل في مظهر الخلفية.

خطأ شائع: نسيان ترتيب القيم بشكل صحيح في الخاصية المختصرة.

ترتيب الطبقات في CSS Background

تذكّر دائماً: المحتوى يظهر فوق الخلفية. الخلفية لا تغطي النص، بل تبقى في الطبقة الخلفية داخل العنصر نفسه.

متى نستخدم كل خاصية Background في CSS؟

• background-color: عندما تحتاج لوناً بسيطاً وواضحاً.
• background-image: عند إضافة نمط بصري أو صورة قسم.
• background: عندما تريد كتابة مختصرة ومنظمة.

أخطاء شائعة في الخلفيات في CSS

١) صورة لا تظهر: غالباً بسبب مسار خاطئ في url().

٢) نص غير مقروء: وضع نص داكن فوق صورة داكنة أو العكس بدون تباين.

٣) تكرار غير مرغوب: نسيان no-repeat في الصور الصغيرة.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

كيف أغير لون الخلفية في CSS؟

باستخدام background-color مثل: body { background-color: #f8fafc; }.

كيف أضع صورة خلفية في CSS؟

باستخدام background-image: url("...") مع تحديد المسار الصحيح للصورة.

ما الفرق بين background-color و background-image في CSS؟

الأولى تضع لوناً فقط، والثانية تضع صورة خلفية. ويمكن استخدامهما معاً في نفس العنصر.

متى أستخدم background shorthand في CSS؟

عندما تحتاج كتابة مختصرة تجمع اللون والصورة والتموضع والتكرار والحجم في سطر واحد.

لماذا لا تظهر صورة الخلفية في CSS؟

السبب الأكثر شيوعاً هو خطأ في المسار، أو أن العنصر بلا ارتفاع/محتوى كافٍ ليُظهر الخلفية.