خاصية حجم الخلفية
آخر تحديث: 2026-09-13
background-size خاصية حجم الخلفية
تتحكم الخاصية background-size في أبعاد صورة الخلفية، وهي مُدخلة في CSS3. تدعم auto (حجم الصورة الأصيل) وcover (تغطية الحاوية بالكامل) وcontain (عرض الصورة كاملة داخل الحاوية) فضلاً عن قيم صريحة من الطول والنسب المئوية. الخاصية مفيدة جداً في التصميم المتجاوب.
| الفئة | |
|---|---|
| القيمة الأولية | auto |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | length |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
background-size: auto | cover | contain | <length> <percentage>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
auto | كلمة مفتاحية | الحجم الأصيل للصورة |
cover | contain | كلمة مفتاحية | تغطية الحاوية أو احتواؤها |
<length> | <percentage> | النوع | قيم حجم صريحة |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-size | ✓ v4 | ✓ v12 | ✓ v4 | ✓ v4.1 | ✓ v10 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يحافظ cover على النسبة ويملأ الحاوية، وقد يقص جزءاً من المحتوى؛ بينما يعرض contain الصورة كاملة، وقد يترك مساحة فارغة.
مهم： عند استخدام size في اختصار background، يجب أن يأتي بعد الموضع ويفصل بخط مائل، مثل center/cover.
❓ الأسئلة الشائعة
Qهل أستخدم background-size: cover أم contain؟
Aاستخدم cover عندما يجب أن تغطي الصورة الحاوية بالكامل ويكون القص مقبولاً — يملأ الحافتان الطويلة الحاوية ويُقص الحافتان القصيرة. استخدم contain عندما تحتاج إلى رؤية الصورة كاملة ويمكنك قبول مساحة فارغة. يشيع استخدام cover في اللافتات وخلفيات البطاقات؛ بينما يناسب contain صور المنتجات والشعارات وأي شيء يجب عرضه كاملاً. كلاهما يحافظ على النسبة الأصلية، لذا لا تتشوه الصورة.
Qهل يمكن تحريك background-size؟
Aنعم. تُعد background-size خاصية قابلة للاستيفاء، لذا تتحرك بسلاسة في الانتقالات و@keyframes، مثل التكبير من background-size: 100% إلى 110% عند التمرير لتأثير تكبير خفيف. لكن التغييرات المتكررة قد تُطلق إعادة الرسم؛ وللأنيميشن الحساسة للأداء يُفضَّل transform: scale().
Qكيف أجعل الخلفية تملأ المساحة دون تمديدها؟
Aاستخدم background-size: cover;. تُحجّم الصورة بنسبتها الأصلية حتى يملأ الضلع الأقصر الحاوية ويُقص الضلع الأطول، لذا لا تشوه. إذا اختلفت نسبة الصورة عن الحاوية اختلافاً كبيراً، أضف background-position: center للتحكم في أي جزء يُبقى. لتجنب القص تماماً، استخدم contain (مع قبول مساحة فارغة) أو وافق نسبة الحاوية مع نسبة الصورة.
Qكيف تعمل القيم المفردة والمزدوجة في background-size؟
Aتضبط قيمتان العرض والارتفاع، مثل background-size: 300px 200px؛ وإذا كان الارتفاع auto فيتحجّم تناسبياً. أما قيمة واحدة، مثل background-size: 300px، فتضبط العرض ويتحجّم الارتفاع تلقائياً للحفاظ على النسبة. تُعد cover وcontain وauto كلمات مفتاحية خاصة ولا يمكن خلطها مع قيم الطول.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
