خصائص الخلفية في لغة CSS

 عنصر الخلفية في CSS هو من العناصر التي ستستدمها تقريباً مع كل جزء وكذلك هو الإطار العام الذي يحكم الصفحة لذلك من المهم أن تفهم طريقة التعامل معه بشكل صحيح

وهناك العديد من الخصائص لعنصر الخلفية وسنشرح كل واحد منها

1- لون الخلفية  [[background-color]]

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

مثال

.element {
background-color:#ffffff
}
 

2- صورة الخلفية [[background-image]]

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

مثال

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

ويتم استبدال image.jpg برابط صورة

 

 ملحوظة : جميع الخواص التالية تستخدم فقط عند اضافة صورة كخلفية لكن في حالة اضافة لون فقط لا تستخدم أى من الخواص التالية

 

3- التكرار  [[background-repeat]]

التكرار وظيفته التحكم في تكرارات صورة الخلفية هل يتم تكرارها هل تكون نسخة واحده مكان التكرار

 

وطبعا تستخدم قيمة واحده فقط من تلك القيم 

.element {
 /*الإفتراضي ويتم فيه تكرار الصورة*/
background-repeat: repeat;
 /*عدم التكرار*/
 background-repeat: no-repeat;
 /*تكرار أفقي*/
 background-repeat: repeat-x;
 /*تكرار رأسي*/
 background-repeat: repeat-y;
 /*توزيع الصورة بالتساوي دون قص*/
 background-repeat: space;
 /*ملئ المساحة دون فراغات*/
 background-repeat: round;
}

  

 4- الموضع [[background-position]]

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

ويكتب بأحد الطرق التالية

.element {
  /* الوسط */
  background-position: center;
  /*استخدام اتجاهات متعددة أعلى اليمين مثلاً*/
   background-position: top right;
  /*استخدام نسبة مئوية من الأعلى والجانب*/
  background-position: 25% 75%;
  /*استخدام وحدة قياس للمسافة مثل البيكسل*/
  background-position: 50px 100px;
}

 هذه أمثلة متعددة لكن عند الإستخدام تستخدم نمط واحد فقط

 

5- الحجم [[background-size]]

 الخاصية تتحكم في حجم الصورة

.element {
 /*الإفتراضي*/
 background-size: auto;
 /*غلاف يغطي كامل المساحة*/
  background-size: cover;
 /*يعرض الصورة كاملة ولا يقص منها شئ*/
  background-size: contain;
 /*الحجم بالنسبة المئوية*/
  background-size: 50% 80%;
 /*الحجم بوحدة قياس بيكسل*/
 background-size: 300px 200px;
}

 نفس ما سبق هذه امثلة لكن تستخدم نمط واحد منهم

 

6- نمط الحركة [[background-attachment]] 

 هذه الخاصية مسؤولة عن نمط حركة الخلفية عند تمرير الصفحة والتحرك فيها

 أمثلة ويمكنك استخدام واحد منهم فقط

.element {
 /* افتراضي - يتحرك مع العنصر */
 background-attachment: scroll; 
 /* ثابت بالنسبة لإطار العرض */
  background-attachment: fixed; 
 /* يتحرك مع محتوى العنصر */
  background-attachment: local; 
}

 كتابة الكود مجمع

هنا سنوضح كيف تكتب كود خلفية كامل بإستخدام ما سبق من خصائص وذلك بطريقتين

الطريقة الأولى إستخدام الخصائص منفردة

.element {
 background-color:#f8f8f8;
 background-image:url('image.png');
 background-repeat: no-repeat;
 background-position: right top;
 background-size: contain;
 background-attachment: fixed;
}

 

 الطريقة الثانية استخدام النمط المختصر

.element {
  background: #ffffff url('صورة.png') no-repeat right top / contain fixed;
}

 النتيجة واحده لكن هذا النمط المختصر يجعل كل الخصائص في سطر واحد بعد الوسم العامل [[background]]

وهذا النمط المختصر يجب ترتيب العناصر فيه بشكل صحيح

 نمط الحركة  → الحجم / → الموضع → التكرار → الصورة → اللون

كلا الطريقتين صحيح استخدم ما ييسر عليك العمل أكثر

 

التدرجات اللونية

 هذا الجزء سنذكره على عجاله هو يعتبر خاصية متقدمه بعض الشئ أن تفهمها وتفهم طرق عملها كل ما تحتاج معرفته عنها هو فقط أنها تعمل بديل عن الصورة [[background-image]] ويمكنك ان تستخدمها مباشرة على عنصر [[background]]

ولا تحتاج استخدام باقي الخواص معها وتكتب بأحد الطريقتين

.element {
/*كتابتها على عنصر الصورة*/
background-image: linear-gradient(to right, #ff0000 0%, #0000ff 100%);

/*كتابتها على عنص الخلفية*/
background: linear-gradient(to right, #ff0000 0%, #0000ff 100%);
}

 لا تحتاج الخوض في طريقة عمل التدرج كثيراً هناك أدوات تساعد في هذا ويمكنك استخدام هذه الآداة