الدرس الرابع : التحكم في الخلفيات (2)

عند استخدام هذه القيمة ،
الخلفية ستتكرر افقيا وعامودية ..


كود PHP:




background-repeat: repeat-x;









[center]عند استخدام هذه القيمة ،
الخلفية ستتكرر افقيا فقط ..

ملاحظة: يستخدم
هذا الكود دائما في الخلفيات التدريجية الأفقية،،


كود PHP:




background-repeat: repeat-y;









[center]عند استخدام هذا الكود ،
ستتكرر الخلفية عاموديا فقط ..


كود PHP:




background-repeat: no-repeat;









[center]هنا لن تتكرر الخلفية في اي
اتجاه ..



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


كود PHP:




body {
background-image: url('bg.gif');
background-repeat: repeat;
}









[center]

background-attachment

التحكم في
تحريك الخلفية

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

تأخذ هذه
الخاصية قيمتين ..


كود PHP:




background-attachment: scroll;









نستخدمها اذا اردنا ان تكون الخلفية متحركة
مع تحريك السكرول الى الأسفل و الأعلى ..


كود PHP:




background-attachment: fixed;









[center]نستخدمها اذا اردنا ابقاء
الخلفية ثابتة والمحتوى هو المتحرك ..



background-position

نستخدمها
لتحديد مكان معين للخلفية

لاحظ
دائما ان القيمة الافتراضية او المكان الافتراضي للخلفية هو أعلى يسار
المتصفح..
ولهذا
تمكنك خاصية البوسيشن من وضع الخلفية في اي مكان تريده في الصفحة ،،

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

بمعنى


اذا كتبنا


كود PHP:




background-position: 50 px 10px;









[center]الخلفية ستكون موجودة بعد 50
بيكسل يسار المتصفح
و
10 بيكسل
من أعلاهـ ..


يمكنك
تحديدها أيضا باستخدام هذهـ القيم :

top
bottom
center
left
right


أو القيم بالبكسل او النسبة المئوية..


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


كود PHP:




background-position: Top Right;









[center]

background

من هذا
الكود نستطيع ان نختصر جميع خصائص الخلفيات في سطر واحد
بمعنى
انك
تستطيع ذكر لون وصورة الخلفية وتحديد مكانها وتحديد شكل التكرار ومتحركة ام
ثابتة .. وهكذا ..

توفر
الكثير من الوقت في كتابة الأكواد ..

مثال:
نريد ان
نجعل الخلفية صورة وخلفها لون ابيض وتكون ثابتة غير متحركة وفي نصف الصفحة
تماما ..

سيكون
الكود كالتالي:


كود PHP:




background: #ffffff url('bg.gif') no-repeat fixed center;









[center]جمعنا فيها كل الخصائص كنوع من اختصار عدد السطور..

ترتيب الكود بيكون دايما بهذه
الطريقة بعد ذكر background:

background-color | background-image |
background-repeat | background-attachment
| background-position

يارب تكونو فهمتو هالنقطة ،،

[center]دمــتم في حــفظ الرحــمن ووداعــته ،،