خاصية الخلفيات (Backgrounds) في لغة CSS تُستخدم للتحكم في خلفية العناصر في صفحات الويب، سواء كانت خلفية لونًا واحدًا، أو صورة، أو تدرج لوني، أو مزيجًا من هذه العناصر. تُعتبر هذه الخاصية من أهم الخواص في CSS لأنها تُساهم بشكل كبير في تصميم وتنسيق صفحات الويب وجعلها جذابة.

تتضمن خاصية الخلفيات في CSS مجموعة من الخصائص الفرعية التي تُتيح التحكم الدقيق في مظهر الخلفية:

1. background-color:

  • تُستخدم لتحديد لون خلفية العنصر.
  • تقبل قيمًا مختلفة مثل:
    • أسماء الألوان (Color names) مثل red، blue، green.
    • قيم HEX مثل #FF0000 (أحمر)، #0000FF (أزرق).
    • قيم RGB مثل rgb(255, 0, 0) (أحمر)، rgb(0, 0, 255) (أزرق).
    • قيم RGBA مثل rgba(255, 0, 0, 0.5) (أحمر مع شفافية 50%).
    • القيمة transparent لجعل الخلفية شفافة.

مثال:

CSS
body {
  background-color: #f0f0f0; /* لون رمادي فاتح */
}

div {
  background-color: rgba(0, 128, 0, 0.7); /* أخضر مع شفافية 70% */
}

2. background-image:

  • تُستخدم لإضافة صورة كخلفية للعنصر.
  • تُستخدم الدالة url() لتحديد مسار الصورة.
  • يمكن استخدام صور بتنسيقات مختلفة مثل JPEG، PNG، GIF.

مثال:

CSS
body {
  background-image: url("background.jpg");
}

3. background-repeat:

  • تُستخدم للتحكم في كيفية تكرار صورة الخلفية.
  • تقبل القيم التالية:
    • repeat: تكرار الصورة أفقيًا وعموديًا (القيمة الافتراضية).
    • repeat-x: تكرار الصورة أفقيًا فقط.
    • repeat-y: تكرار الصورة عموديًا فقط.
    • no-repeat: عدم تكرار الصورة.

مثال:

CSS
body {
  background-image: url("pattern.png");
  background-repeat: repeat-x; /* تكرار أفقي فقط */
}

4. background-position:

  • تُستخدم لتحديد موضع صورة الخلفية داخل العنصر.
  • يمكن استخدام قيم مثل top، bottom، left، right، center، أو قيم رقمية (بالبكسل أو النسبة المئوية).

مثال:

CSS
div {
  background-image: url("image.png");
  background-position: center top; /* وضع الصورة في المنتصف العلوي */
}

5. background-size:

  • تُستخدم لتحديد حجم صورة الخلفية.
  • تقبل القيم التالية:
    • auto: الحجم الأصلي للصورة.
    • contain: تكبير أو تصغير الصورة لتناسب العنصر مع الحفاظ على نسبة العرض إلى الارتفاع.
    • cover: تكبير أو تصغير الصورة لتغطية العنصر بالكامل مع احتمال قص أجزاء من الصورة.
    • قيم رقمية (بالبكسل أو النسبة المئوية) لتحديد عرض وارتفاع الصورة بشكل مُحدد.

مثال:

CSS
div {
  background-image: url("image.jpg");
  background-size: cover; /* تغطية العنصر بالكامل */
}

6. background-attachment:

  • تُستخدم لتحديد ما إذا كانت صورة الخلفية ثابتة أو تتحرك مع تمرير الصفحة.
  • تقبل القيم التالية:
    • scroll: تتحرك الصورة مع تمرير الصفحة (القيمة الافتراضية).
    • fixed: تبقى الصورة ثابتة في مكانها حتى عند تمرير الصفحة.

مثال:

CSS
body {
  background-image: url("stars.jpg");
  background-attachment: fixed; /* خلفية ثابتة */
}

7. background (خاصية الاختصار):

  • يمكن استخدام خاصية background لكتابة جميع خصائص الخلفية في سطر واحد.
  • يتم ترتيب القيم كالتالي: background-color background-image background-repeat background-position background-size background-attachment.

مثال:

CSS
body {
  background: #f0f0f0 url("background.jpg") no-repeat center/cover fixed;
}

أهمية استخدام خاصية الخلفيات:

  • تحسين المظهر: تُساهم في جعل صفحات الويب أكثر جاذبية وجمالية.
  • إضافة هوية بصرية: تُساعد على إنشاء هوية بصرية مميزة للموقع.
  • تحسين تجربة المستخدم: تُساعد على توجيه انتباه المستخدم إلى عناصر معينة في الصفحة.

باستخدام هذه الخصائص بشكل صحيح، يُمكنك إنشاء خلفيات جذابة ومُتنوعة تُساهم في تحسين مظهر وصفحات الويب.