1. تعيين لون خلفية (Background Color)
body {
background-color: #f0f0f0;
}
- يمكنك استخدام أسماء ألوان، كود HEX، RGB، HSL…
2. تعيين صورة خلفية (Background Image)
div {
background-image: url('images/bg.jpg');
}
3. تكرار الخلفية (Background Repeat)
افتراضيًا، تُكرَّر الصورة أفقيًا وعموديًا.
background-repeat: no-repeat;
قيم أخرى:
repeat-x: تكرار أفقي فقطrepeat-y: تكرار عمودي فقطrepeat: التكرار الكامل (الافتراضي)no-repeat: لا تكرار
4. موضع الخلفية (Background Position)
background-position: center;
قيم شائعة:
top leftcenter centerbottom right- أو بالنسب:
50% 50%
5. تغطية الخلفية (Background Size)
background-size: cover;
cover: تغطي العنصر بالكامل (قد تُقص الصورة)contain: تظهر الصورة كاملة (قد تبقى مساحات فارغة)- أو أبعاد معينة:
100px 200px
6. ثبات الخلفية عند التمرير (Background Attachment)
background-attachment: fixed;
scroll: تتحرك الخلفية مع الصفحة (الافتراضي)fixed: تثبيت الخلفية في مكانها
7. كتابة الخلفية بخلاصة واحدة (Background Shorthand)
background: #eee url('bg.jpg') no-repeat center center / cover fixed;
مثال عملي:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url('images/bg.jpg') no-repeat center center / cover fixed;
color: white;
font-family: Arial, sans-serif;
}
.box {
background-color: rgba(0, 0, 0, 0.6);
padding: 30px;
margin: 50px auto;
width: 60%;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="box">
<h1>مرحبا بك!</h1>
<p>هذا مثال على استخدام صورة كخلفية للصفحة مع صندوق بلون شفاف.</p>
</div>
</body>
</html>
الواجب العملي:
- أنشئ صفحة ذات خلفية صورة.
- استخدم
background-size: coverوbackground-position: center. - أضف صندوق داخلي بخلفية ملونة شفافة.