الخلفيات (Backgrounds) فى CSS

---

سنتناقش فى هذا الفصل جميع أنواع الخلفيات (Backgrounds) فى CSS بالتفصيل، مع بعض الأمثلة التوضيحية.

---

 

الخلفيات فى CSS

 

1. CSS background-color

 

تستخدم خاصية الـ background-color لتحديد لون خلفية العنصر. كالتالى:

<style>
    .demo {
        background-color: green;
        color: white;
    }
</style>
<h2 class="demo">CSS Backgrounds</h2>

يمكنك تحديد قيمة اللون بأكثر من طريقة:

• إسم اللون مباشرًا، مثل: “black“.
• RGB، مثل : “(rgb(0, 0, 0“.
• HEX، مثل: “000#“.

 

مثال للتوضيح:

h2 {
  background-color: black; /* Outputs = black */
}

h2 {
  background-color: rgb(0, 0, 0); /* Outputs = black */
}

h2 {
  background-color: #000; /* Outputs = black */
}

---

 

2. CSS background-image

 

تستخدم خاصية background-image لتحديد صورة لخلفية العنصر. بشكل افتراضي، يتم تكرار الصورة بحيث تغطي العنصر بالكامل. كالتالى:

div {
  background-image: url("image.jpg");
  height: 250px;
  width: 100%;
}

---

 

3. CSS background-repeat

 

بشكل افتراضي، يتم تكرار خاصية background-image  أفقياً horizontally ورأسياً vertically.

فى بعض الأوقات قد تحتاج إلى تكرار بعض الصور أفقيًا أو رأسيًا، كالتالى:

div {
  background-image: url("image.jpg");
  background-repeat: repeat-x;
  height: 250px;
  width: 100%;
}

 

فى حالة عدم إحتياجك إلى تكرار الخلفية نهائيًا، يمكنك إستخدام خاصية (background-repeat: no-repeat)، كالتالى:

div {
  background-image: url("image.jpg");
  background-repeat: no-repeat;
  height: 250px;
  width: 100%;
}

---

 

4. CSS background-position

 

يتم استخدام خاصية background-position لتحديد موضع أو مكان صورة الخلفية. كالتالى:

div {
  background-image: url("image.jpg");
  background-repeat: no-repeat;
  background-position: left bottom;
  height: 250px;
  width: 100%;
}

---

 

5. CSS background-attachment

 

تحدد خاصية background-attachment إذا كان يجب تمرير/ثبات صورة الخلفية. كالتالى:

div {
  background-image: url("image.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed; /* Must be Fixed */
  background-position: top left;
  height: 250px;
  width: 100%;
}

div {
  background-image: url("image.jpg");
  background-attachment: scroll; /* Must be scroll */
  height: 250px;
  width: 100%;
}

---

 

6. CSS background

 

الخاصية background عبارة عن اختصار يقوم بتعيين الخصائص التالية في إعلان CSS واحد أو كـ دفعة واحده. بدلًا من القيام بذلك:

div {
  background-image: url("image.jpg");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-color: #f00;
}

يمكنك تنفيذ كل التنسيقات السابقة فى سطر واحد، كالتالى:

div {
  background: #f00 url("image.jpg") no-repeat left bottom;
}

عند استخدام خاصية الـ background المختصرة، لازم يكون ترتيب قيم الخاصية كما يلي:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position.