**background-size:** حجم صورة الخلفية: - `auto` — الحجم الأصلي للصورة - `cover` — تغطي المنطقة كاملاً مع الحفاظ على النسبة (قد تُقطع) - `contain` — تتسع داخل المنطقة دون قطع (قد تترك مساحات فارغة) - `100% 100%` — تمتد لملء المنطقة كاملاً (قد تتشوه) - قيم محددة: `300px 200px`
**background-attachment:** هل تتحرك الخلفية مع التمرير؟ - `scroll` — تتحرك مع العنصر (الافتراضي) - `fixed` — ثابتة بالنسبة للنافذة (تأثير Parallax) - `local` — تتحرك مع محتوى العنصر
**background-origin:** من أين تبدأ الخلفية؟ - `border-box` — من حافة الحد - `padding-box` — من حافة الحشو (الافتراضي) - `content-box` — من حافة المحتوى
**background-clip:** حتى أين تمتد الخلفية؟ - `border-box` — تحت الحد (الافتراضي) - `padding-box` — حتى الحشو - `content-box` — المحتوى فقط - `text` — داخل الأحرف فقط (تأثير النص المتدرج)
| 1 | /* تغطية كاملة */ |
| 2 | .hero { |
| 3 | background-size: cover; |
| 4 | background-position: center; |
| 5 | } |
| 6 | |
| 7 | /* نص بخلفية متدرجة */ |
| 8 | .gradient-text { |
| 9 | background: linear-gradient(135deg, #667eea, #764ba2); |
| 10 | -webkit-background-clip: text; |
| 11 | background-clip: text; |
| 12 | -webkit-text-fill-color: transparent; |
| 13 | color: transparent; |
| 14 | } |
مثال 1: Parallax بـ background-attachment
| 1 | .parallax-section { |
| 2 | background-image: url('/images/mountains.jpg'); |
| 3 | background-attachment: fixed; |
| 4 | background-size: cover; |
| 5 | background-position: center; |
| 6 | height: 60vh; |
| 7 | } |
| 8 | |
| 9 | /* تأثير على الأجهزة التي لا تدعم fixed */ |
| 10 | @media (hover: none) { |
| 11 | .parallax-section { |
| 12 | background-attachment: scroll; |
| 13 | } |
| 14 | } |