خلفيات CSS

تستخدم خصائص الخلفية لتطبيق تأثيرات معينة على خلفية التصميم بشكل عام .

---

لون الخلفية / background color

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

يحدد لون خلفية صفحة الويب من خلال تطبيق لون الخلفية على المنتقى body .

مثال

body {background-color: #b0c4de;}
 

---

هناك 3 أنواع لتخصيص اللون باستخدام CSS كما يلي :

• باستخدام قيمة HEX مثال "#FFFFFF"


• باستخدام قيمة RGB مثال "rgb(255,0,0)"


• باستخدام اسم اللون مثل "Red"

في هذا المثال يتبين أن الوسوم h1, p, div لديهم ألوان خلفية مختلفة :

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

---

صورة الخلفية / Background Image

تستخدم خاصية صورة الخلفية background-image لتحديد صورة كخلفية لعنصر معين

تتكرر الصورة بشكل افتراضي حتى تغطي العنصر المدخلة اليه

يتم تحديد صورة خلفية صفحة الويب كما في المثال التالي :

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

---

تكرار صورة الخلفية – أفقي أو عمودي

حسب الاعدادات الافتراضية سيتم تكرار الصورة في كلا الجانبين الأفقي والعمودي

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

اذا أردت تكرار الصورة بشكل أفقي عندها يمكنك استخدام القيمة repeat-x وستصبح الخلفية كما في المثال التالي :

body
{
background-image: url('smile.jpg');
background-repeat: repeat-x;
}
 

اذا أردت تكرار الصورة بشكل عمودي عندها يمكنك استخدام القيمة repeat-y وستصبح الخلفية كما في المثال التالي :

body
{
background-image: url('smile.jpg');
background-repeat: repeat-y;
}

---

صورة الخلفية – ضبط الموضع وعدم التكرار

عند استخدام صورة كخلفية للموقع , استخدم صورة بحيث لاتخفي النص المكتوب تحتها
يمكن اظهار الصورة في الخلفية لمرة واحدة من خلال خاصية background-repeat

مثال

body
{
background-image: url(smile.jpg');
background-repeat: no-repeat;
}
 

يمكن للصورة أن تخفي النص أو عدم اظهاره بشكل واضح لذلك يمكننا التعديل على موضع الصورة أي تحديد المكان الصحيح لاظهار الصورة في الخلفية وهنا يمكننا استخدام الخاصية background-position

مثال

body
{
background-image: url('smile.jpg');
background-repeat: no-repeat;
background-position: right top;
}
 

اختصار خاصية الخلفية – background

لاحظ من خلال الأمثلة السابقة هناك العديد من الخاصيات التي تتعامل مع الخلفية background
يمكن اختصار الكود وجمعهم في خصيصة واحدة بدلاً من وضع جميع الخاصيات لاحظ المثال التالي :

body {background:#ffffff url('smile.jpg') no-repeat right top;}
 

كما تلاحظ يمكننا جمع جميع الخصائص بخصيصة واحدة ولكن يجب الانتباه الى أن وضع القيم يجب أن تكون مرتبة كما يلي تماماً كما سيتم ترتيبهم حسب الخصائص كالتالي :

• لون الخلفية / background-color


• صورة الخلفية / background-image


• تكرار الخلفية / background-repeat


• مرفقات الخلفية / background-attachment


• موضع الخلفية / background-position

لايهم اذا كانت احدى القيم غير موجودة ولكن الأهم المحافظة على ترتيبهم تماماً كما ذكرت

---

الخاصية	الوصف
background	يمكن ضبط جميع قيم الخلفيات بخاصية واحدة
background-attachment	تحديد صورة الخلفية سواء مثبتة أو متحركة إلى نهاية الصفحة
background-color	تحديد لون خلفية العنصر
background-image	تحديد صورة خلفية العنصر
background-position	تحديد بداية المكان لصورة الخلفية
background-repeat	تحديد كيفية تكرار صورة الخلفية

---