التعامل مع الخلفيات في CSS

توفر لك CSS تشكيلة من الخصائص التي تساعد في التعامل بحرية مع خلفيات عناصر الويب , وهي كالتالي :

أولاً : لون الخلفية Background Color

لتحديد لون الخلفية لأي عنصر نستخدم الخاصية background-color .
مثلاً لتحديد لون الخلفية لصفحة الويب بالكامل سنستخدم الخاصية background-color مع العنصر body :

body  { background-color: #1cc1c3; }

لتحديد اللون في CSS هناك ثلاث طرق رئيسية :
1- عن طريق اسم اللون , مثل : "Red" .
2- عن طريق قيمة اللون في النظام الست عشري HEX , مثل : "ca2bcb#" , وتحصل عليها من أي Color Picker .
3- عن طريق قيمة RGB (يعني Red, Green, Blue) , مثل : "(202, 43,203)rgb" , وتحصل عليها من أي Color Picker .
أمثلة أخرى :

h1 { background-color: #0de02d; }

p { background-color: rgb(13, 224, 45); }

div { background-color: Orange; }

h3.myClass { background-color: rgb(155, 43, 116); }

ثانياً : صورة الخلفية Background Image

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

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

ملاحظة مهمة :
عند عمل خلفية لصفحة الويب تجنب استخدام ألوان أو صور مزعجة لأنها ستسبب صعوبة للزوار في قراءة محتوى موقعك , ولكن استعمل خلفيات متناسبة مع لون الخط في الموقع , انظر لهذين المثالين :
مثال لخلفية جيدة :

مثال لخلفية سيئة :

ثالثاً : تكرار الخلفية Background Repeat

بشكل افتراضي فإن الخاصية background-image تقوم بتكرار الصورة بشكل أفقي (على المحور x) وعمودي (على المحور y) , انظر للصورة التالية والتي سأستعملها كخلفية للصفحة وستتكرر بشكل افتراضي :

وبعد استعمالها انظر كيف أصبحت الصفحة :

ليست جميلة ,, أليس كذلك؟ ,, اذن مالحل؟
الحل هو ان نستخدم الخاصية background-repeat والتي تساعدنا في التحكم بتكرار الخلفية , وتحمل أربع قيم :
الأولى : repeat-x وهي تسمح بتكرار الخلفية في الاتجاه الأفقي فقط , وتمنع تكرارها في الاتجاه العمودي .
الثانية : repeat-y وهي تسمح بتكرار الخلفية في الاتجاه العمودي فقط , وتمنع تكرارها في الاتجاه الأفقي .
الثالثة : repeat وهي تسمح بتكرار الخلفية في كلا الاتجاهين الأفقي والعمودي .
الرابعة : no-repeat وهي تمنع تكرار الخلفية تماماً في الاتجاهين الأفقي والعمودي .

سنستعمل الخاصية background-repeat في مثالنا السابق :

body  { background-image: url('gardient.png');

background-repeat: repeat-x; }

وستصبح الخلفية كالتالي :

وهل هناك فائدة من تكرار الخلفية ؟

نعم هناك فائدة كبيرة , ففي تصميم المواقع اذا أردت تعيين خلفية للصفحة فلا يمكنك استخدام الصور ذات الحجم الكبير أعني انك تستطيع استخدامها ولكن هذا قد يتسبب في ابطاء موقعك مما سيسبب انزعاجاً لزوار الموقع وربما يخسر الموقع الكثير من زواره , لهذا يعمد المصممون إلى استخدام صورة ذات حجم صغير ثم القيام بتكرارها على المحورين الأفقي والعمودي فيحصلون بهذا على خلفية جميلة ذات حجم صغير وتغطي كامل الصفحة بدون أن يبطئ هذا من سرعة موقع الويب .
انظر لهذا المثال والذي سنستخدم فيه هذه الصورة ذات الحجم الصغير :

وسنستخدم معها الخاصية background-repeat لتكرارها :

body {

background-image: url('pattern.png');

background-repeat: repeat;  }

والنتيجة كالتالي :

رابعاً : ارتباط الخلفية Background Attachment

لتحديد ارتباط الخلفية نستخدم الخاصية background-attachment , ونقصد بارتباط الخلفية أن نجعلها ثابتة فلا يتم تمريرها عند النزول إلى أسفل الصفحة , وهذه الخاصية تحمل قيمتين :
1- scroll : وهي تسمح بتمرير الخلفية اثناء تمرير الصفحة .
2- fixed : وهي تبقي الخلفية ثابتة وتمنع تمريرها أثناء تمرير الصفحة , انظر للمثال التالي :

body { background-image: url('tree.png');

background-attachment: fixed; }

والنتيجة هي :

خامساً : موقع صورة الخلفية Background Position

الصورة التالية تمثل عنصراً من صفحة الويب وبه المواقع التي يمكنك أن تنقل صورة الخلفية إليها :

الموقع الافتراضي للخلفية هو أعلى يسار العنصر , يعني (left top) .
لتغيير موقع صورة الخلفية لأي عنصر نستخدم الخاصية background-position مع أحد الأماكن المحددة في الصورة أعلاه , مثلاً أريد نقل الخلفية إلى أسفل يمين العنصر سيكون الكود كالتالي :

background-position: right bottom;

او مثلاً رغبت في نقل الخلفية إلى الأسفل ولكن تريد جعلها في المنتصف (لا إلى اليمين ولا إلى اليسار) , سيكون الكود كالتالي :

background-position: bottom;

هناك طريقة أخرى لتغيير موقع صورة الخلفية للعنصر وهي باستخدام الخاصية background-position مع النسب المئوية وهذه الطريقة أكثر دقة ومرونة من الطريقة السابقة .
عرفنا سابقاً أن نقطة الأصل لصورة الخلفية هي أعلى اليسار بالنسبة للعنصر , ومن هذا الأساس سنستخدم النسب لتحديد موقع الخلفية , انظر للكود التالي :

background-position: 20% 50%;

وهذا معناه أن صورة الخلفية تبعد بمقدار %20 عن يسار العنصر , وتبعد بمقدار %50 عن أعلى العنصر , والصورة التالية ستوضح أكثر :

ملاحظة مهمة : لكي تقوم بتغيير موقع الخلفية يجب أن تكون الخلفية غير مكررة , أي أن الخاصية background-repeat قيمتها no-repeat وإلا فلن تستطيع تغيير موقع الخلفية .

الخاصية المختصرة Shorthand Property

لاحظت مما سبق أنه عندما تعاملنا مع الخلفية بمفردها كتبنا الكثير من الخواص (حوالي 4 خواص) , تخيل أنك ستتعامل مع 20 عنصر اذن 4×20 يعني 80 سطر ستقوم بكتابتها لأجل التعامل مع الخلفية فقط !! وهذا كثير جداً .
لاختصار الكود يمكننا أن ندمج جميع الخصائص السابقة في خاصية واحدة فقط هذه الخاصية تسمى "الخاصية المختصِرة" أو "الخاصية المختزِلة" .
الخاصية المختصرة للتعامل مع الخلفيات هي ببساطة "background" , انظر لهذا المثال :

body { background: #ff34cd url('tree.jpg') no-repeat left bottom; }

كما ترى أدرجنا جميع الخواص في سطر واحد فقط! , ولكن هناك ترتيب يجب أن تتقيد به عند استخدامك لقيم الخواص مع الخاصية المختصرة وهو :
1- لون الخلفية background-color
2- صورة الخلفية background-image
3- تكرار الخلفية background-repeat
4- ارتباط الخلفية background-attachment
5- موقع الخلفية background-position
بعبارة أخرى يجب أن تتقيد بهذا الترتيب :

{ background: color image repeat attachment position }