الدرس الثامن: تنسيق الخلفيات بخيارات احترافية عبر CSS

تُعد تنسيقات الخلفيات من العناصر الأساسية التي تلعب دورًا مهمًا في تحسين تجربة المستخدم وجذب الانتباه داخل صفحات الويب. باستخدام CSS، يمكنك التحكم في خلفيات العناصر بشكل دقيق ومرن، سواء باستخدام ألوان ثابتة، صور خلفية، تدرجات لونية، أو حتى تأثيرات متقدمة. في هذا الدرس، سنتعرف على مجموعة من الخصائص التي تمكّنك من تصميم خلفيات احترافية تجعل موقعك أكثر جاذبية واحترافية.

استخدام الخلفيات في CSS لتخصيص تصميم الصفحات الإلكترونية

1. خاصية background-color – لون الخلفية

خاصية background-color تُستخدم لتعيين لون خلفية لأي عنصر على صفحة الويب. يمكنك استخدام أسماء الألوان المعروفة، أو رموز الألوان السداسية (HEX)، أو نظام RGB، أو HSL حسب تفضيلك واحتياجات التصميم.

أمثلة على طرق مختلفة لتعيين لون الخلفية:

/* باستخدام اسم اللون */
div {
  background-color: lightblue;
}

/* باستخدام كود HEX */
div {
  background-color: #f0f0f0;
}

/* باستخدام نظام RGB */
div {
  background-color: rgb(240, 240, 240);
}

/* باستخدام نظام HSL */
div {
  background-color: hsl(0, 0%, 94%);
}

💡 نصيحة: اختر ألوان خلفية متناسقة مع ألوان النصوص والعناصر الأخرى في الصفحة لتحسين تجربة المستخدم وسهولة القراءة.

2. خاصية background-image – صورة الخلفية

تُستخدم خاصية background-image لإضافة صورة كخلفية لأي عنصر في الصفحة. يمكنك تعيين الصورة باستخدام رابط مباشر أو مسار ملف الصورة داخل مشروعك.

section {
  background-image: url('background.jpg');
}

يمكنك أيضًا دمج صورة الخلفية مع لون خلفي باستخدام خاصية background-color، بحيث يظهر اللون خلف الصورة، وهذا مفيد عندما تكون الصورة شفافة أو لا تغطي العنصر بالكامل.

section {
  background-color: #f0f0f0; /* لون خلفية */
  background-image: url('background.png'); /* صورة فوق اللون */
}

خصائص مكملة لتحسين عرض الخلفية:

• background-repeat: للتحكم في تكرار الصورة (مثلاً no-repeat لمنع التكرار).
• background-size: لتحديد حجم الصورة (مثلاً cover لتغطية العنصر بالكامل).
• background-position: لتحديد مكان ظهور الصورة داخل العنصر (مثلاً center center للتمركز).
• background-attachment: للتحكم في ثبات الخلفية أثناء التمرير (مثل fixed).

section {
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

💡 نصيحة: استخدم background-size: cover; لجعل الصورة تغطي العنصر بالكامل مع الحفاظ على نسبة الأبعاد، و no-repeat لتجنب تكرار الصورة.

3. خاصية background-repeat – تكرار صورة الخلفية

تُستخدم خاصية background-repeat للتحكم في كيفية تكرار صورة الخلفية داخل العنصر. تحدد هذه الخاصية ما إذا كانت الصورة ستظهر مرة واحدة أو تتكرر أفقياً و/أو عمودياً.

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

مثال عملي:

div {
  background-image: url('pattern.png');
  background-repeat: repeat-x; /* تكرار أفقي */
  background-size: 100px 100px; /* حجم الصورة */
}

💡 نصيحة: عند استخدام الصور المتكررة، تأكد من أن الصورة مصممة بحيث تتناسق عند التكرار لتجنب الفواصل الواضحة أو التداخلات غير المرغوبة.

4. خاصية background-position – موضع الصورة

تُستخدم خاصية background-position لتحديد مكان ظهور صورة الخلفية داخل العنصر. يمكنك تحديد الموضع باستخدام كلمات مفتاحية، أو قيم نسبية (بالنسبة المئوية)، أو قياسات ثابتة (مثل البيكسل).

قيم شائعة الاستخدام:

• center center: توضع الصورة في مركز العنصر (الموضع الافتراضي).
• top left: الصورة في أعلى يسار العنصر.
• top right: الصورة في أعلى يمين العنصر.
• bottom left: الصورة في أسفل يسار العنصر.
• bottom right: الصورة في أسفل يمين العنصر.
• 50% 50%: نفس تأثير center center، حيث تمثل النسب المئوية موقع نقطة مركز الصورة داخل العنصر.
• 10px 20px: إزاحة الصورة 10 بكسل من اليسار و20 بكسل من الأعلى.

أمثلة عملية:

div {
  background-image: url('image.jpg');

  /* تموضع الصورة في المركز */
  background-position: center center;

  /* أو تموضعها في الركن العلوي الأيسر */
  background-position: top left;

  /* تموضع الصورة مع إزاحة */
  background-position: 30px 50px;
}

💡 نصيحة: عند استخدام الصور الصغيرة كأنماط (Patterns)، استخدم background-position لضبط بدايات التكرار بشكل دقيق لتحصل على مظهر متناسق.

5. خاصية background-size – حجم الخلفية

تتحكم هذه الخاصية في كيفية تغيير حجم صورة الخلفية لتتناسب مع العنصر. من أهم القيم التي تدعمها:

• auto: تحتفظ الصورة بحجمها الأصلي دون تغيير.
• cover: تُكبر الصورة لتغطي كامل مساحة العنصر، مع احتمال اقتطاع أجزاء من الصورة للحفاظ على النسبة.
• contain: تُكبر الصورة لتكون كاملة ضمن العنصر مع الحفاظ على النسبة، وقد تترك مساحات فارغة.
• تحديد أبعاد محددة (مثل 100px 200px أو 50% 100%): يتيح لك التحكم الدقيق في عرض وارتفاع الصورة.

أمثلة عملية:

section {
  background-image: url('background.jpg');

  /* تغطية العنصر بالكامل */
  background-size: cover;

  /* عرض الصورة كاملة ضمن العنصر */
  background-size: contain;

  /* حجم محدد */
  background-size: 150px 100px;
}

💡 نصيحة: استخدم cover للخلفيات التي تريد تغطية العنصر بالكامل بدون ظهور فراغات، وcontain عند الحاجة لإظهار الصورة كاملة دون اقتطاع.

6. خاصية background-attachment – تثبيت الخلفية

تحدد خاصية background-attachment ما إذا كانت صورة الخلفية تتحرك مع محتوى الصفحة أثناء التمرير أو تبقى ثابتة في مكانها، مما يؤثر على تجربة المستخدم والمظهر الجمالي للصفحة.

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

مثال عملي:

body {
  background-image: url('background.jpg');
  background-attachment: fixed;
  background-size: cover;
}

💡 نصيحة: استخدم fixed بحذر لأنه قد يؤثر على أداء التمرير في بعض الأجهزة القديمة أو المتصفحات، كما أن بعض الهواتف المحمولة قد لا تدعم هذا التأثير بشكل جيد.

7. استخدام التدرجات اللونية linear-gradient

تُتيح خاصية linear-gradient إنشاء خلفيات جميلة ومتدرجة الألوان بدون الحاجة لاستخدام صور، مما يقلل من حجم الصفحة ويحسن الأداء. يتم تحديد اتجاه التدرج والألوان التي ينتقل بينها تدريجيًا.

الصيغة الأساسية:

background-image: linear-gradient(الاتجاه, لون البداية, لون النهاية);

أمثلة على الاتجاهات:

• to right: من اليسار إلى اليمين.
• to left: من اليمين إلى اليسار.
• to bottom: من الأعلى إلى الأسفل (الاتجاه الافتراضي).
• to top: من الأسفل إلى الأعلى.
• يمكنك تحديد الزاوية بالدرجات، مثل 45deg أو 120deg.

مثال عملي:

div {
  background-image: linear-gradient(to right, #0066ff, #00ccff);
}

تدرجات متعددة الألوان:

يمكنك إضافة أكثر من لون للتدرج:

div {
  background-image: linear-gradient(to bottom, #ff0000, #ffff00, #00ff00);
}

💡 نصيحة احترافية لتصميم الخلفيات في موقعك:

1. دمج تدرجات الألوان مع الشفافية باستخدام ألوان RGBA:
يمكنك استخدام خاصية linear-gradient أو radial-gradient مع قيم ألوان rgba() لتوفير تأثيرات لونية ناعمة ومتدرجة مع إمكانية التحكم في الشفافية. هذا يسمح لك بإضافة عمق وجمالية أكبر لخلفيات موقعك دون الحاجة إلى صور، مما يقلل من حجم الملفات ويحسن سرعة تحميل الصفحة.

مثال عملي:

background-image: linear-gradient(
  to right, 
  rgba(33, 150, 243, 0.8), 
  rgba(33, 150, 243, 0.3)
);
  

2. استخدام صور خلفية عالية الجودة وتحسينها:
عند استخدام صور كخلفية، احرص على اختيار صور ذات جودة عالية لتظهر بشكل واضح وجذاب. لكن لا تنسى أن تقوم بتحسين الصور وضغطها باستخدام أدوات متخصصة (مثل TinyPNG، ImageOptim، أو أدوات عبر الإنترنت) لتقليل حجمها بدون فقدان ملحوظ في الجودة.
تحسين الصور يساعد بشكل كبير في تسريع تحميل موقعك، مما يؤدي إلى تجربة مستخدم أفضل وتصنيف أعلى في محركات البحث.

نصائح لتحسين الصور:

• اختر تنسيق مناسب مثل JPEG للصور الفوتوغرافية وPNG للرسوميات ذات الخلفية الشفافة.
• استخدم أدوات ضغط صور قبل رفعها إلى الموقع.
• فكر باستخدام تنسيقات حديثة مثل WebP التي توفر جودة عالية مع حجم أقل.

3. دمج كلا التقنيتين معًا:
يمكن دمج الخلفية باستخدام صورة مع تدرجات شفافة فوقها باستخدام CSS لجعل التصميم أكثر عمقًا واحترافية، كما يلي:

background-image: 
  linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
  url('your-image.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  

هذا الأسلوب يُستخدم بكثرة في المواقع الحديثة لجعل النصوص فوق الصور أكثر وضوحًا ولتوفير تباين جيد بين المحتوى والخلفية.

هل أعجبك الدرس؟ لا تتردد في تجربة هذه الخصائص لتصميم خلفيات جذابة واحترافية في موقعك!