اذهب إلى المحتوى
  • 0

الـ Background في جهة HTML أو CSS

Abanoub Ashraf

السؤال

Recommended Posts

  • 1

نستخدم عنصر background في صفحة HTML لتحديد خلفية للعنصر نفسه، أو للصفحة ككلل، عن طريق تحديد قيمة للخاصية background-color.

ومثلاً لإضافة خلفية زرقاء إلى الصفحة ككل، علينا إضافة الكود التالي إلى عنصر body:

<body style="background-color: blue;">

...

</body>

ولكن  استخدام عنصر background في HTML له بعض القيود حيث لا يمكن استخدامه لتحديد صورة كخلفية، أو لتحديد كيفية تكرار الصورة.

أما استخدام عنصر background في صفحة CSS، فهو أكثر مرونة، ونستطيع استخدامه لتحديد خلفية للعنصر نفسه، أو للصفحة ككل، أيضًا لاستخدامه لتحديد صورة كخلفية، أو لتحديد كيفية تكرار الصورة.

ولإضافة خلفية زرقاء إلى الصفحة ككل، نقوم بإضافة الكود التالي إلى ملف CSS:

body {
  background-color: blue;
}

ولاستخدام صورة كخلفية، نكتب الكود كالتالي:

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

ولتكرار الصورة نكتب الآتي:

body {
  background-repeat: repeat;
}

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 1

يمكنك تنفيذ كل الاشكال التي تحتاجها في كل من الطريقتين والامر متروك إليك، والاكثر حريةً هي استخدام الـ background في جهة الـ html والتحكم في خصائصها من جهة الـ css وهذه الطريقة تستخدم في التصاميم المعقدة والتي تحتوي على العديد من الطبقات والاشكال المتداخلة.

بينما الشكل الابسط هو استخدام الـ background في جهة الـ css وهي الطريقة الافتراضية والاكثر استخداماً بشكل عام

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

الاختيار بين عنصر HTML <img /> وخاصية CSS background-image ربما يبدو معقداً ولكن مع الشرح التالي سيتعرف متى يفضل استخدام كل طريقة

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

بصرف النظر عن الاعتبارات المذكورة أعلاه، إذا كانت الصورة جزءًا من المحتوى مثل الشعار أو الرسم التوضيحي أو الشخص (شخص حقيقي، وليس صورة مستخدمة)، استخدم عنصر <img /> مع سمة النص البديل alt. بالنسبة إلى جميع الحالات الأخرى، استخدم الصورة الخلفية (background image).

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...