شرح جميع خصائص خلفية CSS بالصور والأمثلة العملية

مقدمة شاملة إلى خصائص الخلفية في CSS

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

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

فهرس الخصائص التي سنغطيها

• background-image
• background-size
• background-repeat
• background-position
• background-origin
• background-clip
• background-attachment
• background-color
• الصيغة المختصرة background

ما المقصود بخصائص الخلفية في CSS؟

خصائص الخلفية تسمح لك بالتحكم في كيفية عرض الصور والألوان داخل العنصر. فبدلاً من وضع صورة عشوائية داخل الصفحة، يمكنك تحديد:

• حجم الصورة باستخدام background-size.
• مكان ظهورها بواسطة background-position.
• هل تتكرر أم لا من خلال background-repeat.
• النطاق الذي تُرسم بداخله بوساطة background-origin وbackground-clip.
• سلوكها أثناء التمرير باستخدام background-attachment.

هذه الخصائص مفيدة جداً عند بناء واجهات متجاوبة وتحسين تجربة المستخدم بصرياً.

إعداد مشروع التجربة

قبل البدء، يكفي أن تكون لديك معرفة أساسية بـ HTML وCSS، وأن تستخدم محرراً مثل VS Code.

خطوات الإعداد

1. أنشئ مجلداً جديداً باسم BACKGROUND-PROJECT.
2. افتحه داخل VS Code.
3. أنشئ ملفين: index.html وstyle.css.
4. ثبّت إضافة Live Server.
5. شغّل المعاينة المباشرة للمشروع.

هيكل HTML الأساسي

<div class="container"></div>

تهيئة العنصر في CSS

حتى تظهر الخلفية بوضوح، يجب تحديد ارتفاع للعنصر. المثال التالي يضبط الارتفاع على كامل نافذة العرض:

.container {
  height: 100vh;
}

يمكنك تنزيل الصور المستخدمة في التجارب من أي مستودع صور مناسب أو استخدام روابط مباشرة أثناء الشرح.

خاصية background-image لإضافة صورة الخلفية

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

الصيغة العامة

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

استخدام المسار المحلي للصورة

عند العمل على مشروع محلي، ستحتاج إلى كتابة المسار الصحيح للصورة حسب موقعها بالنسبة إلى ملف style.css.

الحالة الأولى: الصورة وملف CSS في المجلد نفسه

.container {
  background-image: url("kitty.png");
  height: 100vh;
  background-repeat: no-repeat;
  background-size: contain;
}

الحالة الثانية: الصورة داخل مجلد فرعي

.container {
  background-image: url("./Assets/kitty.png");
  height: 100vh;
  background-repeat: no-repeat;
  background-size: contain;
}

الحالة الثالثة: الصورة في المجلد السابق

.container {
  background-image: url("../kitty.png");
  height: 100vh;
  background-repeat: no-repeat;
  background-size: contain;
}

استخدام رابط مباشر للصورة

إذا كانت الصورة متاحة على الإنترنت، فيمكنك تمرير الرابط مباشرة داخل الدالة url().

.container {
  background-image: url("https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szxp3jqyjyksrep1ep82.png");
  height: 100vh;
  background-repeat: no-repeat;
  background-size: contain;
}

خاصية background-size للتحكم في أبعاد الخلفية

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

الصيغة العامة

.container {
  background-size: cover;
}

القيمة cover

تجعل الصورة تغطي كامل مساحة العنصر، حتى لو أدى ذلك إلى قص أجزاء منها. هذا الخيار مناسب للأغلفة والعناوين الرئيسية.

.container {
  background-image: url('cute-bear.png');
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}

القيمة contain

تحافظ على الصورة كاملة داخل العنصر بدون قص، لكن قد تترك فراغات إذا كانت أبعاد العنصر مختلفة عن أبعاد الصورة.

.container {
  background-image: url('cute-bear.png');
  background-repeat: no-repeat;
  background-size: contain;
  height: 100vh;
}

تحديد العرض والارتفاع يدوياً

يمكن ضبط أبعاد الخلفية بدقة عبر قيمتين تمثلان العرض ثم الارتفاع.

.container {
  background-image: url('cute-bear.png');
  background-repeat: no-repeat;
  background-size: 200px 200px;
  height: 100vh;
}

القيمة auto

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

خاصية background-repeat لتكرار الخلفية

تتحكم خاصية background-repeat في عدد مرات تكرار صورة الخلفية واتجاه هذا التكرار.

الصيغة العامة

.container {
  background-repeat: repeat;
}

القيم الشائعة لهذه الخاصية هي:

• repeat
• repeat-x
• repeat-y
• no-repeat
• space
• round

إعداد أساسي للتجربة

.container {
  background-image: url('kitty.png');
  background-size: 200px 200px;
  background-repeat: repeat;
  height: 100vh;
}

القيمة repeat

تكرر الصورة أفقياً وعمودياً حتى تمتلئ المساحة المتاحة.

.container {
  background-image: url('kitty.png');
  background-size: 200px 200px;
  background-repeat: repeat;
  height: 100vh;
}

القيمة repeat-x

تكرر الصورة على المحور الأفقي فقط.

.container {
  background-image: url('kitty.png');
  background-size: 200px 200px;
  background-repeat: repeat-x;
  height: 100vh;
}

القيمة repeat-y

تكرر الصورة على المحور العمودي فقط.

.container {
  background-image: url('kitty.png');
  background-size: 200px 200px;
  background-repeat: repeat-y;
  height: 100vh;
}

القيمة no-repeat

تعرض الصورة مرة واحدة فقط بدون أي تكرار.

.container {
  background-image: url('kitty.png');
  background-size: 200px 200px;
  background-repeat: no-repeat;
  height: 100vh;
}

القيمة space

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

.container {
  background-image: url('kitty.png');
  background-size: 200px 200px;
  background-repeat: space;
  height: 100vh;
}

القيمة round

تكرر الصورة مع تمديدها أو ضغطها قليلاً حتى تتوزع بشكل كامل دون ترك فراغات.

.container {
  background-image: url('kitty.png');
  background-size: 200px 200px;
  background-repeat: round;
  height: 100vh;
}

خاصية background-position لتحديد موضع الصورة

تتيح لك هذه الخاصية وضع الصورة في أي مكان داخل العنصر، سواء باستخدام قيم ثابتة مثل px أو كلمات دلالية مثل top وright أو حتى النسب المئوية.

مثال باستخدام الإحداثيات

.container {
  background-image: url("kitty-idea.png");
  background-size: 200px 200px;
  background-repeat: no-repeat;
  background-position: 300px 200px;
  height: 100vh;
}

مثال باستخدام الكلمات الدلالية

.container {
  background-image: url("kitty-idea.png");
  background-size: 200px 200px;
  background-repeat: no-repeat;
  background-position: bottom right;
  height: 100vh;
}

مثال باستخدام النسب المئوية

.container {
  background-image: url("kitty-idea.png");
  background-size: 200px 200px;
  background-repeat: no-repeat;
  background-position: 25% 15%;
  height: 100vh;
}

خاصية background-origin وتحديد نقطة بداية رسم الخلفية

تحدد هذه الخاصية من أين تبدأ الخلفية داخل نموذج الصندوق box model. هل تبدأ من حدود العنصر؟ أم من الحشو الداخلي؟ أم من المحتوى فقط؟

القيم المتاحة

• border-box
• padding-box
• content-box
• inherit

.container {
  background-image: url('cute-girl.png');
  background-repeat: no-repeat;
  background-size: 400px 400px;
  background-origin: border-box;
  padding: 40px;
  border: 25px solid red;
  border-style: dashed;
  width: 400px;
  height: 400px;
}

عملياً، إذا اخترت border-box فستبدأ الخلفية من حدود العنصر. أما padding-box فتبدأ من منطقة الحشو، بينما content-box تجعل بداية الخلفية من مساحة المحتوى فقط.

خاصية background-clip لقص الخلفية داخل حدود محددة

تشبه هذه الخاصية background-origin من حيث القيم، لكن الفرق الجوهري هو أن background-clip تتحكم في حدود قصّ الخلفية، أي إلى أي منطقة يُسمح للخلفية بالظهور.

القيم المتاحة

• border-box
• padding-box
• content-box
• inherit

.container {
  background-image: url('cute-girl.png');
  background-repeat: no-repeat;
  background-size: 400px 400px;
  background-clip: border-box;
  padding: 40px;
  border: 25px solid red;
  border-style: dashed;
  width: 400px;
  height: 400px;
}

إذا أردت مثلاً أن لا تمتد الخلفية إلى منطقة الحدود، فاستخدم padding-box. وإذا رغبت بقصرها على مساحة المحتوى فقط، فاستخدم content-box.

خاصية background-attachment وسلوك الخلفية أثناء التمرير

تحدد هذه الخاصية العلاقة بين الخلفية ومحتوى العنصر عند التمرير. وهي مفيدة في التأثيرات البصرية مثل الخلفيات الثابتة أو تأثيرات الشبه parallax.

القيم الأساسية

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

مثال عملي

.container {
  background-image: url('landscape.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height: 100vh;
}

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

خاصية background-color لإضافة لون الخلفية

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

لون مباشر بالاسم

.container {
  background-color: red;
  height: 100vh;
}

لون بصيغة hex

.container {
  background-color: #ff0000;
  height: 100vh;
}

استخدام الدالة rgb()

.container {
  background-color: rgb(99, 110, 114);
  height: 100vh;
}

استخدام الدالة rgba() مع الشفافية

.container {
  background-color: rgba(99, 110, 114, 0.5);
  height: 100vh;
}

استخدام التدرج اللوني عبر linear-gradient()

التدرجات اللونية تمنح الخلفية مظهراً حديثاً دون الحاجة إلى صورة، كما أنها غالباً أخف في التحميل.

.container {
  background: linear-gradient(90deg, #22c1c3, #fdbb2d);
  height: 100vh;
}

الزاوية 90deg تحدد اتجاه التدرج، ويمكنك تغييرها للحصول على تأثيرات مختلفة.

الصيغة المختصرة background لتجميع الخصائص

بدلاً من كتابة عدة خصائص منفصلة، يمكنك استخدام الصيغة المختصرة background لدمج أكثر من إعداد في سطر واحد. هذه الطريقة مفيدة لتقليل الكود وتحسين قابليته للقراءة عندما تكون القيم واضحة.

كتابة الخصائص بشكل منفصل

.container {
  background-color: skyblue;
  background-image: url('kitty.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 200px 200px;
  height: 100vh;
}

الكتابة باستخدام الاختصار

.container {
  background: skyblue url('kitty.png') no-repeat fixed 200px 200px;
  height: 100vh;
}

من المهم الانتباه إلى أن بعض القيم يجب أن تُكتب بترتيب منطقي حتى لا يحدث تعارض أو التباس عند القراءة والصيانة.

أفضل ممارسات عند استخدام خلفيات CSS

• استخدم cover في الأقسام البصرية الكبيرة التي تحتاج إلى ملء كامل المساحة.
• استخدم contain عندما يكون من المهم عرض الصورة كاملة دون قص.
• قلل استخدام الصور الثقيلة، وفضّل التدرجات اللونية عندما يكون ذلك كافياً.
• اختبر خصائص مثل fixed وlocal على الهواتف قبل اعتمادها في الإنتاج.
• احرص على وجود تباين جيد بين الخلفية والنص لتحسين القراءة وتجربة المستخدم.

الخلاصة التقنية

خصائص الخلفية في CSS ليست مجرد أدوات تجميل، بل هي جزء أساسي من بناء واجهات متوازنة وسريعة ومتجاوبة. الاستخدام الذكي لخصائص مثل background-size وbackground-position وbackground-repeat يساعدك على إنتاج تصميم أكثر احترافية مع كود منظم وسهل الصيانة. وإذا كنت تطمح إلى صفحات محسّنة لمحركات البحث وتجربة مستخدم أفضل، فابدأ دائماً بخلفيات خفيفة، واضحة، ومتوافقة مع مختلف الشاشات.