الخلفيات في CSS
تستطيع تلوين النص. الآن لوّن السطح خلفه. الخلفيات تملأ صندوق العنصر — ألوان مصمتة وصور وتدرجات لاحقاً — بينما تبقى الحروف فوقها بـ color.
ما هي خلفية CSS؟
الخلفية طبقة تُرسَم خلف محتوى العنصر (وعادة خلف منطقة الـ padding). تتحكم بها بعائلة خصائص: background-color وbackground-image وbackground-repeat وbackground-size وbackground-position واختصار background. التدرجات درس منفصل — اليوم التعبئة المصمتة وأساسيات الصورة.
الخصائص بنظرة
اعرف وظيفة كل منها أولاً. لا تحتاج كل الكلمات في اليوم الأول.
📊 خصائص خلفية CSS اليومية
| الخاصية | المهمة | بداية يومية |
|---|---|---|
background-color |
تعبئة مصمتة خلف المحتوى | background-color: #f1f5f9; |
background-image |
طبقة صورة (أو تدرج لاحقاً) | background-image: url("hero.jpg"); |
background-repeat |
التبليط أو إيقافه | background-repeat: no-repeat; |
background-size |
مقياس الصورة في الصندوق | background-size: cover; |
background-position |
محاذاة الصورة | background-position: center; |
background |
اختصار يجمع عدة قيم | background: #0f172a url("a.jpg") center / cover no-repeat; |
تعبئة مصمتة بـ background-color
أبسط خلفية لون مصمت. استخدم أي قيمة لون تعرفها — مسمّاة أو hex أو rgb أو hsl.
خلفية بطاقة مصمتة
css.card {
background-color: #f1f5f9;
color: #0f172a;
padding: 1rem;
}اجعل النص مقروءاً
ضع color للحروف وbackground-color للصندوق. التعبئة الفاتحة تحتاج نصاً أغمق؛ التعبئة الداكنة تحتاج نصاً أفتح.
صور بـ background-image
أشر إلى ملف بـ url("…"). المسارات نسبية لملف CSS (أو عناوين مطلقة). الصورة خلف المحتوى — ليست <img> في تدفق HTML.
صورة خلف كتلة hero
css.hero {
background-image: url("hero.jpg");
color: white;
min-height: 12rem;
padding: 2rem;
}الصورة مقابل <img>
استخدم <img> حين تكون الصورة محتوى (نص بديل، معنى). استخدم background-image حين تكون زخرفة خلف واجهة أو قسم.
أوقف التبليط: no-repeat + cover
افتراضياً كثير من المتصفحات تبّلط صورة صغيرة. للـ hero أوقف التكرار ووسّع بـ cover لتملأ الصورة الصندوق.
صورة hero تملأ الصندوق
css.hero {
background-image: url("hero.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}cover بجملة
cover يكبّر الصورة حتى يمتلئ الصندوق — قد تُقص الحواف. contain يُدخل الصورة كاملة — قد ترى شرائط فارغة.
وجّه نقطة التركيز
background-position يحدد أي جزء من الصورة يبقى مرئياً — مفيد حين يقصّ cover وجوهاً أو شعارات.
توجيه الصورة
css.hero {
background-image: url("hero.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: right center;
}الاختصار (أبقِه مقروءاً)
يمكنك جمع قيم في background. ابدأ بالمفصّل أثناء التعلم؛ انتقل للاختصار حين يألف الترتيب.
اختصار خلفية مضغوط
css.banner {
background: #0f172a url("banner.jpg") center / cover no-repeat;
color: #f8fafc;
padding: 2rem;
}تلميح الترتيب
نمط شائع: لون، صورة، position / size، repeat. إن حيّرك الاختصار فافصله من جديد — كلاهما صالح.
جرّبها بنفسك
.cardبـbackground-color: #f1f5f9ونص داكن بـcolor..heroبـbackground-image: url("…")وmin-heightونص فاتح.- ضع
background-repeat: no-repeatوbackground-size: coverوbackground-position: center. - حرّك position إلى
left centerأوright centerوراقب ما يبقى في الإطار. - اختياري: أعد كتابة الـ hero باختصار
backgroundمع لون احتياطي قبلurl().
أخطاء شائعة
- استخدام
colorلتعبئة الصندوق — يلوّن الحروف فقط - نسيان
no-repeatفيتبّلط الشعار عبر القسم - مسارات
url("…")مكسورة (مجلد خاطئ أو بلا علامات اقتباس) - صور ضخمة غير مضغوطة كخلفيات — صفحات بطيئة
- القفز لتدرجات معقدة قبل أن يثبت اللون المصمت وصورة واحدة (التدرجات الدرس التالي)
باختصار
- الخلفيات تُرسَم خلف المحتوى؛
colorيلوّن النص background-colorللتعبئة المصمتة؛background-imageللصور- تحكّم بالصور بـ
no-repeatوcover/containوposition - الاختصار اختياري — الوضوح أهم من الذكاء أثناء التعلم
- وصفات التدرج الكاملة للدرس التالي
- تمرّن على بطاقة رمادية وhero بصورة حتى تثبت أسماء الخصائص
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى