| الخاصية أو القيمة | طريقة العمل والتأثير البرمجي | الاستخدام الشائع |
|---|---|---|
| background-color | يحدد اللون الثابت الذي يغطي مساحة العنصر بالكامل ويُرسم دائماً تحت الصور الخلفية | يُستخدم كطبقة أمان تضمن وضوح النص في حال فشلت الصورة الخلفية في التحميل من السيرفر |
| background-image | تتيح دمج صورة خارجية أو تدرج ألوان كخلفية للصندوق باستخدام مسار ملف الصورة | تستخدم لبناء واجهات بصرية جذابة وتدعم كتابة أكواد تدرج الألوان المتنوعة مثل linear-gradient |
| no-repeat | يجبر الصورة الخلفية على الظهور مرة واحدة فقط دون تكرارها في المساحات الفارغة | الخيار الأساسي عند استخدام صور كبيرة أو أيقونات محددة الحجم لمنع تشوه مظهر الواجهة |
| repeat | القيمة الافتراضية للمتصفح حيث تتكرر الصورة أفقياً وعمودياً حتى تغطي كامل مساحة الصندوق | ممتازة للأنماط والزخارف الصغيرة التي تكمل بعضها لتصنع خلفية ممتدة ونظيفة |
| repeat-x أو repeat-y | يجبر الصورة على التكرار في اتجاه واحد فقط إما أفقياً على محور السينات أو عمودياً على محور الصادات | مفيدة لتكرار تأثيرات الظلال أو الخطوط الجمالية الممتدة على حواف معينة |
| space | تكرر الصورة قدر الإمكان داخل الحاوية وتوزع المساحات الفارغة المتبقية بين الصور بالتساوي | تضمن عدم قص أي جزء من الصورة وتمنح التصميم توازناً برمجياً ذكياً بدون تمديد |
| round | تكرر الصورة وتمدد أبعادها أو تضغطها تلقائياً لكي تملأ الفراغات تماماً بدون ترك أي مساحات فارغة | تضمن ملء الصندوق بالكامل بعدد صحيح من الصور بدون ظهور أجزاء مقصوصة من الحواف |
| background-position | تحدد نقطة بداية ظهور وتمركز الصورة داخل الصندوق باستخدام الكلمات الجاهزة أو النسب والبيكسل | تمنحك تحكماً كاملاً مثل الصياغة الذكية لترك مسافة 20 بكسل من اليمين و10 بكسل من الأعلى بدقة |
| الخلفيات المتعددة | تتيح دمج أكثر من صورة أو تدرج لوني لنفس العنصر من خلال الفصل بين مساراتها بفاصلة عادية | تُرسم الصورة الأولى المكتوبة في الكود فوق الصور التالية وتُستخدم لصنع تأثيرات دمج بصرية غاية في الاحترافية |
**background-color:** لون خلفية العنصر. يُرسم تحت الصور.
**background-image:** صورة أو gradient كخلفية. `background-image: url('img.jpg');`
**background-repeat:** هل تتكرر الصورة؟ - `no-repeat` — مرة واحدة - `repeat` — تكرار في كل الاتجاهات - `repeat-x / repeat-y` — تكرار أفقي أو عمودي - `space` — توزيع بمسافات متساوية - `round` — تكرار مع تمديد للملاءمة
**background-position:** موضع الصورة: - كلمات: `top`, `center`, `bottom`, `left`, `right` - قيم: `50% 25%`, `20px 40px` - صياغة ذكية: `background-position: right 20px top 10px`
يمكن تعريف **خلفيات متعددة** بفصلها بفاصلة (الأولى تُرسم فوق الأخرى).
| 1 | /* خلفية صورة واحدة */ |
| 2 | .hero { |
| 3 | background-image: url('hero.jpg'); |
| 4 | background-repeat: no-repeat; |
| 5 | background-position: center center; |
| 6 | } |
| 7 | |
| 8 | /* خلفيات متعددة */ |
| 9 | .layered { |
| 10 | background-image: |
| 11 | url('overlay.png'), |
| 12 | url('background.jpg'); |
| 13 | background-position: center, center; |
| 14 | background-repeat: no-repeat, no-repeat; |
| 15 | } |
مثال 1: Hero Section كلاسيكي
| 1 | .hero { |
| 2 | background-color: #0f172a; /* fallback */ |
| 3 | background-image: |
| 4 | linear-gradient(to bottom, rgba(15,23,42,0.7), rgba(15,23,42,0.4)), |
| 5 | url('/images/hero.jpg'); |
| 6 | background-repeat: no-repeat; |
| 7 | background-position: center center; |
| 8 | background-size: cover; |
| 9 | min-height: 100vh; |
| 10 | display: flex; |
| 11 | align-items: center; |
| 12 | } |