شرح خاصية CSS Background Image مع أمثلة HTML عملية

مقدمة: لماذا تُعد صور الخلفية مهمة في تصميم الواجهات؟

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

المتصفحات الحديثة تدعم عدداً كبيراً من صيغ الصور مثل .jpg و.png و.gif و.svg، مما يمنح المطور مرونة واسعة في بناء واجهات جذابة وسريعة الفهم. في هذا الدليل ستتعرف على كيفية إضافة صورة خلفية، ثم ضبط التكرار والموضع والحجم والتثبيت، وصولاً إلى استخدام التدرجات اللونية كخلفية احترافية.

الصيغة الأساسية لاستخدام background-image في CSS

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

لنفترض أنك أضفت صورة باسم sunset.png داخل مجلد images. يمكنك بعد ذلك تعيينها كخلفية لعنصر مثل section عبر الكود التالي:

section {
  background-image: url("images/sunset.png");
}

كيف يعمل هذا الكود؟

• section: يحدد العنصر الذي ستظهر عليه الخلفية.
• background-image: الخاصية المسؤولة عن تعيين صورة خلفية.
• url(): تُستخدم لإخبار المتصفح بمكان ملف الصورة.
• "images/sunset.png": يمثل مسار الصورة داخل المشروع.

هذا النوع من المسارات يُسمى relative path، أي مساراً محلياً مرتبطاً ببنية المشروع الحالية، وليس رابطاً كاملاً من الإنترنت.

كما يمكنك استخدام absolute path، وهو رابط كامل يبدأ عادة بـ http:// أو https:// ويشير إلى صورة موجودة على الويب.

ويمكن أيضاً كتابة الخاصية من دون علامات اقتباس داخل url() بالشكل التالي، وستعمل بالطريقة نفسها:

section {
  background-image: url(images/sunset.png);
}

إيقاف تكرار صورة الخلفية باستخدام background-repeat

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

للتحكم بهذا السلوك نستخدم الخاصية background-repeat، وهي تسمح بتحديد طريقة تكرار الصورة أو إيقاف التكرار تماماً.

القيمة الافتراضية: repeat

section {
  background-repeat: repeat;
}

هذه القيمة تعني تكرار الصورة أفقياً وعمودياً، أي على المحورين x وy حتى تمتلئ مساحة العنصر.

إيقاف التكرار بالكامل: no-repeat

section {
  background-repeat: no-repeat;
}

هنا ستظهر الصورة مرة واحدة فقط من دون أي تكرار.

التكرار الأفقي: repeat-x

section {
  background-repeat: repeat-x;
}

تُكرر الصورة أفقياً فقط عبر الصفحة، أي على المحور x من اليسار إلى اليمين.

التكرار العمودي: repeat-y

section {
  background-repeat: repeat-y;
}

في هذه الحالة تتكرر الصورة عمودياً فقط على المحور y من الأعلى إلى الأسفل.

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

بعد إضافة الصورة وإدارة التكرار، تأتي خطوة مهمة وهي ضبط مكان ظهور الصورة داخل الخلفية. لهذا الغرض نستخدم الخاصية background-position.

تستقبل هذه الخاصية غالباً قيمتين:

• القيمة الأولى تحدد الموضع الأفقي على المحور x.
• القيمة الثانية تحدد الموضع العمودي على المحور y.

تحديد الموضع باستخدام px

section {
  background-position: 20px 30px;
}

هذا يعني تحريك الصورة بمقدار 20px أفقياً و30px عمودياً داخل العنصر.

تحديد الموضع بالكلمات المفتاحية

section {
  background-position: right center;
}

في هذا المثال ستظهر الصورة في الجهة اليمنى من العنصر مع تمركزها عمودياً.

أما إذا أردت توسيط الصورة أفقياً وعمودياً معاً، فاستخدم:

section {
  background-position: center center;
}

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

section {
  background-position: 20% 40%;
}

هنا تتحرك الصورة بنسبة 20% أفقياً و40% عمودياً نسبة إلى مساحة العنصر الحاوي.

ومن المفيد معرفة أنه يمكن أحياناً تمرير قيمة واحدة فقط مثل background-position: center; أو background-position: 20px; أو background-position: 20%;، وعندها يتعامل المتصفح مع التمركز وفق القواعد الافتراضية للخاصية.

تغيير حجم صورة الخلفية باستخدام background-size

للتحكم في أبعاد صورة الخلفية نستخدم الخاصية background-size. وهي من أهم الخصائص للحصول على مظهر متوازن ومتجاوب مع مختلف الشاشات.

تحديد الحجم بقيم ثابتة

section {
  background-size: 20px 40px;
  /* sizes the image 20px across and 40px down the page */
}

بهذا الشكل يتم تحديد عرض الصورة وارتفاعها يدوياً.

القيمة cover

عند استخدام background-size: cover; فإن الصورة تتمدد لتغطي كامل مساحة العنصر مهما كان حجمه. وهذا الخيار ممتاز للأقسام البطولية hero sections والخلفيات العريضة.

لكن يجب الانتباه إلى أن الصورة قد تتعرض للقص عند الأطراف إذا كانت أبعادها الأصلية لا تتطابق مع أبعاد العنصر.

القيمة contain

أما background-size: contain; فتجعل الصورة تظهر كاملة داخل العنصر من دون قص. هذا مفيد عندما تكون المحافظة على كامل تفاصيل الصورة أهم من ملء المساحة بالكامل.

في المقابل قد تترك الصورة فراغات داخل الخلفية إذا كانت أبعاد العنصر أكبر بكثير من أبعادها، ولهذا غالباً ما يُستخدم معها background-repeat: no-repeat;.

عند استخدام cover قد تُقص أجزاء من الصورة:

وعند التبديل إلى contain ستنكمش الصورة لتظهر كاملة داخل العنصر:

تثبيت الخلفية أثناء التمرير عبر background-attachment

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

السلوك الافتراضي: scroll

section {
  background-attachment: scroll;
}

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

تثبيت الخلفية: fixed

section {
  background-attachment: fixed;
}

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

استخدام التدرجات اللونية بدلاً من الصور

لا تقتصر خاصية background-image على الصور التقليدية فقط، بل يمكن استخدامها أيضاً لإنشاء تدرجات لونية جذابة باستخدام linear-gradient(). وهذه الطريقة مفيدة جداً عندما تريد خلفية خفيفة وسريعة التحميل مع مظهر عصري.

أبسط تدرج لوني

section {
  background-image: linear-gradient(black, white);
}

هذا المثال ينشئ تدرجاً من الأسود إلى الأبيض.

اتجاهات التدرج الشائعة

• 0deg: من الأعلى إلى الأسفل.
• 90deg: من اليسار إلى اليمين.
• 180deg: من الأسفل إلى الأعلى.
• 270deg: من اليمين إلى اليسار.

كما يمكن التعبير عن هذه الاتجاهات بالكلمات مثل to top وto right وto bottom وto left.

مثال على تدرج باتجاه اليسار

section {
  background-image: linear-gradient(to left, pink, orange);
}

استخدام ألوان hex

section {
  background-image: linear-gradient(to left, #42275a, #734b6d);
}

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

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

أفضل ممارسات عملية عند استخدام صور الخلفية

• اختر صوراً مضغوطة للحفاظ على سرعة تحميل الصفحة.
• استخدم cover في الأقسام الكبيرة التي تحتاج تغطية كاملة.
• استخدم contain إذا كان ظهور الصورة كاملة أولوية.
• أوقف التكرار عبر no-repeat عندما لا يكون التكرار مرغوباً.
• اختبر موضع الخلفية على الجوال وسطح المكتب للتأكد من جودة العرض.
• لا تجعل الخلفية تعيق قراءة النص؛ ويمكن إضافة طبقة شفافة أو تدرج فوق الصورة لتحسين التباين.

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

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