شرح CSS background

سيتم شرح جميع الأكواد بالتفصيل في الفيديو الخاص بهذا الدرس لأن الأكواد الخاصة بتنسيق خلفية العنصر تحتاج الي تطبيق اكثر من الشرح النظري 😊

1 background-color: ***;

وهنا تجد جميع القيم الخاصة بهذا الكود

2 background-image: url( );

يُستخدم هذا الكود لعمل صورة خلفية لأي عنصر من عناصر ال HTML

وهنا يوجد سؤال مهم جداً وهو:

ما الفرق بين <img /> و CSS background-image ؟؟

بص يا صاحبي 😃 لو انت عارف وظيفة ال HTML و وظيفة ال CSS ف انت اكيد عارف الإجابة 😊 صح ؟ 😊 بس انا هقولك عشان لو مش فاكر يا صديقى 🧡

هو ان الصورة بداخل عنصر ال <img /> عبارة عن جزء من المُحتوي بمعني إنك لو حذفت هذه الصورة من الموقع فسوف يكون هناك جزء مفقود من المعلومات داخل الصفحة... مثال علي ذلك هذه الصورة المهمة
اما بالنسبة ل CSS background-image فهي تضيف شكل جمالي للصفحة فقط وبالتالي عند حذف هذه الصورة من الموقع فلن يكون هناك جزء مفقود من المعلومات التي بداخل الصفحة
تتميز خاصية ال CSS background-image بأنه يُمكن تغيير الصورة لصورة أخري بسلاسة و نعومة عند عمل hover عليها عن طريق خاصية ال transition
مثال علي ذلك:

 
<!DOCTYPE html>
<html lang="en">
<head>
<style>
  
    div{
    border: 5px solid red;
    height: 500px;
    background-image: url(/images/img1.png);
    transition: all 1s;
    background-repeat: no-repeat;
    }
 
    div:hover{ background-image: url(img1.png); }
 
</style>
</head>
 
<body>
  <div>      </div>
</body>
 
</html>

2.5 background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

يُستخدم هذا الكود لعمل تدرج لوني للخلفية وتم شرح الــ linear-gradient بالتفصيل في الدرس رقم 3

3 background-repeat: ***;

وهنا تجد جميع القيم الخاصة بهذا الكود

4 background-position: ***;

وهنا تجد جميع القيم الخاصة بهذا الكود

5 background-size: ***;

وهنا تجد جميع القيم الخاصة بهذا الكود

⚠ وهنا تجد مثال مُحترم علي جميع الأكواد التي بالأعلي 👆

الفيديو الخاص ب شرح CSS background

CSS website Example

⚠ وهنا يجب التحدث عن موضوع مهم جدا وهو الــ CSS Image Sprites

CSS Image Sprites

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

بإختصار الـــ Image Sprites هي عبارة عن طريقة لدمج مجموعة من الصور في صورة واحده.

مثال علي ذلك:
تخيل معي صفحة ويب تحتوي 5 صور وكل صورة تستغرق وقت للتحميل وبالتالي هذه الصفحة تستغرق وقتًا أطول للتحميل صح ؟ صح طبعا 😂

والحل: نقوم بدمج ال 5 صور بداخل صورة واحدة وبالتالي نقوم باستدعاء هذه الصورة مره واحدة فقط ونضع كل صورة في مكانها

وسيتم شرح ذلك بالتفصيل في الفيديو الخاص بهذا الدرس لأنه هذه الخاصية تحتاج الي شرح عملي أكثر من الكلام النظري 😉
وهذا الموقع سوف يساعدنا كثيرا علي ذلك

شرح CSS background

الفيديو الخاص ب شرح CSS background

CSS website Example

CSS Image Sprites

الفيديو الخاص ب شرح CSS image sprites