في هذا الدرس سنتعلم كيف نتحكم بالخلفيات لعناصر HTML باستخدام خصائص CSS المختلفة، مثل تلوين الخلفية، إضافة صور، التحكم بالتكرار، والموضع.
1. تغيير لون الخلفية
لتغيير لون خلفية أي عنصر نستخدم الخاصية background-color.
مثال:
background-color: lightblue;
2. إضافة صورة كخلفية
لإضافة صورة كخلفية نستخدم الخاصية background-image، مع تحديد مسار الصورة داخل url().
مثال:
background-image: url('image.jpg');
ملاحظة: تأكد أن المسار صحيح ومناسب لمكان ملف الصورة.
3. التحكم بتكرار الخلفية
بشكل افتراضي، الصورة تتكرر لتملأ العنصر. نستخدم الخاصية background-repeat للتحكم بالتكرار.
- لإلغاء تكرار الصورة:
background-repeat: no-repeat;
- لتكرارها أفقيًا فقط:
background-repeat: repeat-x;
- لتكرارها رأسيًا فقط:
background-repeat: repeat-y;
4. تحديد موضع الخلفية
يمكنك تحديد مكان ظهور الصورة باستخدام الخاصية background-position.
مثال لوضع الخلفية في المنتصف:
background-position: center;
أو وضعها في الزاوية العليا اليمنى:
background-position: top right;
5. التحكم بحجم الخلفية
لجعل الصورة تغطي كامل العنصر بدون ترك فراغات نستخدم background-size.
- لتغطية العنصر بالكامل مع احتمال قص جزء من الصورة:
background-size: cover;
- لضبط الصورة كاملة بحيث تكون مرئية كاملة داخل العنصر:
background-size: contain;
مثال عملي كامل
background-color: lightblue;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
الواجب العملي
- صمّم عنصر div بلون خلفية مميز.
- أضف صورة كخلفية وتحكم بالتكرار والموضع والحجم.
- جرّب الفرق بين خاصيتي
coverوcontain.
