صور الخلفية في CSS: دليل شامل لإضافة وتخصيص الصور لعناصر div

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

إضافة صورة خلفية واحدة: خطوة بخطوة

تُعد عملية إضافة صورة باستخدام خاصية background-image بسيطة للغاية. كل ما عليك فعله هو توفير المسار إلى الصورة ضمن قيمة الدالة url(). يمكن أن يكون مسار الصورة رابطاً مباشراً (URL) أو مساراً محلياً داخل مشروعك.

باستخدام رابط URL خارجي

لنفترض أن لديك رابطاً لصورة على الإنترنت وترغب في استخدامها كخلفية:

div {
  /* نمط خلفية من Toptal Subtle Patterns */
  background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");
  height: 400px;
  width: 100%;
}

باستخدام مسار محلي

إذا كانت الصورة موجودة ضمن مجلدات مشروعك، يمكنك الإشارة إليها بمسار نسبي:

body {
  /* نمط خلفية من Toptal Subtle Patterns */
  height: 400px;
  width: 100%;
  background-image: url("./images/oriental-tiles.png");
}

في كلا المثالين، قمنا بتحديد ارتفاع وعرض للعنصر لضمان ظهور الصورة بشكل واضح.

إضافة صور خلفية متعددة: إبداع بلا حدود

لا تقتصر خاصية background-image على صورة واحدة فقط؛ بل يمكنك تطبيق صور متعددة على نفس العنصر، مما يفتح آفاقاً واسعة للتصميمات المعقدة والمبتكرة. يتم ذلك عن طريق فصل كل قيمة url() بفاصلة.

div {
  /* نمط خلفية من Toptal Subtle Patterns */
  height: 400px;
  width: 100%;
  background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");
  background-repeat: no-repeat, no-repeat;
  background-position: right, left;
}

تحليل الكود متعدد الصور

يبدو الكود أعلاه كثيفاً بعض الشيء، دعنا نفككه لفهم أعمق:

• تحديد الصور: يتم فصل كل مسار صورة بقيمة url() بفاصلة، مما يخبر المتصفح بوجود أكثر من صورة خلفية.

  background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");

• تخصيص الصور: يمكنك تحديد خصائص إضافية لكل صورة على حدة، مثل كيفية تكرارها وموقعها.

  background-repeat: no-repeat, no-repeat;
  background-position: right, left;

  في هذا المثال، استخدمنا خاصيتي background-repeat لمنع تكرار الصور، و background-position لتحديد موقع كل صورة (الأولى يميناً، والثانية يساراً). هناك العديد من الخصائص الفرعية التي يمكنك إضافتها لصور الخلفية، مثل background-size و background-attachment، وحتى إضافة تدرجات لونية (gradients) لتعزيز المظهر.

أهمية ترتيب الصور: فهم طبقات الخلفية

يُعد ترتيب الصور التي تدرجها في خاصية background-image أمراً بالغ الأهمية بسبب مفهوم “ترتيب التكدس” (stacking order). هذا يعني أن الصورة الأولى المدرجة في القائمة ستكون الأقرب إلى المستخدم (في المقدمة)، تليها الصورة الثانية، وهكذا. لنأخذ مثالاً لتوضيح هذه النقطة:

div {
  /* نمط خلفية من Toptal Subtle Patterns */
  height: 400px;
  width: 100%;
  background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");
  background-repeat: no-repeat, no-repeat;
}

في الكود أعلاه، أدرجنا صورتين. الصورة الأولى (morocco-blue.png) ستكون في مقدمة الصورة الثانية (oriental-tiles.png). إذا كانت كلتا الصورتين بنفس الحجم وتفتقران إلى الشفافية (opacity)، فسنرى الصورة الأولى فقط. ولكن إذا قمنا بتحريك الصورة الثانية (oriental-tiles.png) بمقدار 200 بكسل إلى اليمين، فسنتمكن من رؤية جزء منها (بينما يظل الباقي مخفياً خلف الصورة الأولى).

متى يجب استخدام background-image؟ اعتبارات الوصولية

على الرغم من المزايا العديدة لخاصية background-image، إلا أن هناك جانباً سلبياً مهماً يجب مراعاته، وهو يتعلق بإمكانية الوصول (accessibility). قد لا تكون الصورة مرئية أو مفهومة لجميع المستخدمين، خاصة أولئك الذين يعتمدون على قارئات الشاشة (screen readers). السبب في ذلك هو أنه لا يمكنك إضافة معلومات نصية وصفية مباشرة إلى خاصية background-image. ونتيجة لذلك، ستتجاهل قارئات الشاشة هذه الصور.

لذا، يجب استخدام خاصية background-image فقط عندما تكون الصورة مجرد عنصر زخرفي أو تجميلي للصفحة ولا تحمل معنى جوهرياً للمحتوى. أما إذا كانت الصورة تحمل معنى أو غرضاً مهماً، فمن الأفضل استخدام عنصر HTML المخصص للصور وهو <img>. بهذه الطريقة، يمكنك إضافة نص وصفي للصورة باستخدام السمة alt، والذي سيتم التقاطه بواسطة قارئات الشاشة، مما يضمن وصول المعلومات لجميع المستخدمين.

<img class="house" src="./images/farnsworth_house.jpeg" alt="منزل زجاجي صممه لودفيغ ميس فان دير روه يقع في بلانو، إلينوي.">

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

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

تُعد خاصية background-image في CSS أداة قوية ومرنة لإضافة لمسات جمالية وتصميمية للصفحات الويب. من خلالها، يمكن للمطورين إضافة صورة واحدة أو عدة صور، والتحكم في تكرارها ومواقعها، وحتى دمجها مع تدرجات لونية لإنشاء تأثيرات بصرية فريدة. ومع ذلك، من الضروري جداً مراعاة جانب الوصولية؛ فاستخدام background-image يجب أن يقتصر على العناصر الزخرفية البحتة التي لا تحمل قيمة معلوماتية أساسية. في المقابل، يجب الاحتكام إلى عنصر <img> في HTML مع السمة alt للصور ذات المحتوى الدلالي لضمان تجربة مستخدم شاملة ومتاحة للجميع، بما في ذلك مستخدمي قارئات الشاشة. هذا التمييز بين الغرض الجمالي والدلالي هو حجر الزاوية في بناء واجهات ويب حديثة وفعالة.