شرح background-image في CSS — كيف تضيف صورة خلفية متجاوبة باحتراف؟

إضافة صورة خلفية في CSS خطوة مهمة لتصميم أقسام جذابة مثل Hero Sections والبطاقات. لكن المفتاح الحقيقي ليس فقط إضافة الصورة، بل التحكم في حجمها وطريقة عرضها.

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

ما هي background-image في CSS؟

خاصية background-image تسمح لك بوضع صورة خلف محتوى العنصر. الصورة تظهر في الخلف، بينما النصوص والأزرار تظهر فوقها.

التعريف البسيط: background-image في CSS تضيف صورة خلفية لعنصر HTML باستخدام url().

كيف نكتب background-image في CSS؟

.hero {
    background-image: url("mountain.jpg");
}

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

سطر بسطر:

• .hero: العنصر المستهدف.
• url("mountain.jpg"): مسار ملف الصورة.

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

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

أهم خاصية مع background-image: background-size

لضبط استجابة صورة الخلفية على الشاشات المختلفة، نستخدم background-size. أكثر القيم استخداماً:

القيمة	ماذا تفعل؟	متى نستخدمها؟
auto	الحجم الأصلي للصورة	نادر الاستخدام في واجهات حديثة
cover	تغطي العنصر بالكامل حتى لو حصل قص	Hero وخلفيات الأقسام الكبيرة
contain	تظهر الصورة كاملة دون قص	عند أهمية رؤية الصورة كاملة

الفرق بين cover و contain في CSS

.hero-cover {
    background-size: cover;
}

.hero-contain {
    background-size: contain;
}

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

النتيجة المتوقعة:

• cover: تغطية كاملة (قد تقص جزءاً من الصورة).
• contain: رؤية الصورة كاملة (قد تترك فراغاً).

خطأ شائع: استخدام contain في Hero كبير فتظهر فراغات غير مرغوبة.

تركيبة عملية شائعة لصور الخلفية في CSS

.hero {
    background-image: url("hero.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

ماذا يفعل هذا الكود؟ يعطي إعداداً متوازناً لصورة خلفية حديثة ومتجاوبة.

سطر بسطر:

• cover: تغطية كاملة.
• center: التركيز في الوسط.
• no-repeat: منع تكرار الصورة.

النتيجة المتوقعة: قسم Hero نظيف يعمل جيداً على مختلف الشاشات.

خطأ شائع: نسيان no-repeat فتتكرر الصورة الصغيرة.

أخطاء شائعة في background-image في CSS

١) الصورة لا تظهر: تحقق من المسار واسم الملف وحالة الأحرف.

٢) قص مزعج: راجع قيمة background-position مع cover.

٣) تباين ضعيف: أضف طبقة داكنة خفيفة فوق الصورة لزيادة وضوح النص.

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

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

باستخدام background-image: url("...") على العنصر المطلوب.

ما الفرق بين cover و contain في CSS؟

cover يملأ المساحة كاملة وقد يقص، بينما contain يظهر الصورة كاملة وقد يترك فراغات.

كيف أجعل صورة الخلفية متجاوبة في CSS؟

استخدم غالباً: background-size: cover; background-position: center; background-repeat: no-repeat;.

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

السبب الأكثر شيوعاً: مسار خاطئ للصورة أو عدم وجود ارتفاع كافٍ للعنصر.

هل background-image أفضل من img في CSS؟

للخلفيات والزينة: background-image أفضل. للصور المحتوائية المهمة (SEO/Accessibility): استخدم <img>.