background-size

خاصية حجم الخلفية background-size

خاصية background-size تتحكم بمقاس صورة الخلفية — وcover الكلمة التي تحل «كيف أملأ القسم بالصورة بلا تشويه؟».

القرار الأزلي بين القيمتين: **cover** تكبّر الصورة لتغطي العنصر كاملًا محافظةً على نسبها (تقص الأطراف الزائدة) — خيار خلفيات الأبطال دائمًا؛ و**contain** تُظهر الصورة كاملة داخل العنصر (قد يتبقى فراغ) — خيار الشعارات والأيقونات.

ترافقها background-position لاختيار «مركز الاهتمام» الناجي من القص (وجوه الصور مثلًا: position: center top)، وbackground-repeat: no-repeat لإسكات التبليط الافتراضي العتيق.

الصياغة

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

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .box { height: 100px; border-radius: 12px; margin-bottom: 8px; background-image: linear-gradient(45deg, #7c5cff 25%, #22d3ee 25%, #22d3ee 50%, #7c5cff 50%, #7c5cff 75%, #22d3ee 75%); background-color: #ede9fe; color: #17151d; display: grid; place-items: center; font-weight: bold; }
  .cov { background-size: cover; }
  .con { background-size: 60px; background-repeat: repeat; }
</style>
<div class="box cov">cover — نمط واحد ممدد يغطي</div>
<div class="box con">حجم 60px مع تكرار — تبليط</div>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
cover	تغطية كاملة بلا تشويه (مع قص) — خلفيات الأبطال
contain	الصورة كاملة داخل العنصر (مع فراغ محتمل) — شعارات
أبعاد صريحة	100px أو 50% — أنماط وزخارف مضبوطة

💡 نصائح عملية

ثلاثي الخلفيات القياسي: cover + center + no-repeat — احفظه كتلة واحدة
وجوه تُقص بـ cover؟ حرّك المركز: background-position: center 20%

⚠️ أخطاء شائعة

نسيان no-repeat فتتبلط الصورة الصغيرة بشكل عتيق
contain لخلفية قسم كامل ثم استغراب الفراغات حولها

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs