خصائص او اوامر المؤثره على الخلفيات :
1- Background-Color :الخاصيه المتحكمه فى لون خلفيه اى عنصر
الحاله الثانيه : ان تكون الصوره المراد اضافتها تكون فى فولدر غير الفولدر المخزن فيه الصفحه التى بها الكود
الحاله الثالثه: ان تكون الصوره المراد اضاقتها فى البارتشن مباشرا وليس مخزنه فى اى فولدر
1- Background-Color :الخاصيه المتحكمه فى لون خلفيه اى عنصر
body{background-color : red ;} تاخذ قيمه اسم اللون مباشره
body{background-color : rgb(123,76a,abc) ;} RGB لمراجعه ما هو
----------------------------------------------------------------------------------------------------------
2-Background-Image : الخاصيه المتحكمه فى اضافه صوره كخلفيه للصفحه
هناك ثلاثه حالات لاضافه صوره:-
الحاله الاولى : ان تكون الصوره المراد اضافتها فى نفس الفولدر المخزن فيه الصفحه التى بها الكود
الحاله الثانيه : ان تكون الصوره المراد اضافتها تكون فى فولدر غير الفولدر المخزن فيه الصفحه التى بها الكود
body {background-image : url ("../images/minds.gif ") ;} اسم الفولدر المحتوى على الصوره images
الحاله الثالثه: ان تكون الصوره المراد اضاقتها فى البارتشن مباشرا وليس مخزنه فى اى فولدر
body {background-image : url ("E:/minds.gif " ) ;} اسم البارتشن المخزن عليه الصور E
------------------------------------------------------------------------------------------------------------
3-Background-repeat : الخاصيه المتحكمه فى تكرار الصوره المضافه كخلفيه
هناك اربع حالات للتكرار:-
body{Background-repeat :repeat-x ; } فى حاله تكرار الصوره رأسيا
body{Background-repeat : repeat-y ; } فى حاله تكرار الصوره افقيا
body{Background-repeat : repeat ; } فى حاله تكرار الصوره رأسيا وافقيا
body{Background-repeat :no-repeat ; } فى حاله عدم التكرار
------------------------------------------------------------------------------------------------------------
4-Background-attachment : الخاصيه المتحكمه فى ثبات او تحريك الخلفيه .. عندما تنزل بالصفحه لاخرها
body{ background-attachment : scroll ;} هو الوضع الافتراضى .. وهى فى حاله تحريك الخلفيه
body{background-attachment : fixed ;} فى حاله ثبات الخلفيه
------------------------------------------------------------------------------------------------------------
5-Background-Position: خاصيه مسؤله عن وضع صوره الخلفيه فى مكان معين فى الصفحه وهى تاخد قيم left , right , top and bottom او تأخد قيمه بالpx مثل 100px او قيمه بالنسبه المئويه مثل 50%
الوضع الافتراضى اعلى يسار
الوضع الافتراضى اعلى يسار
body{ background-position : 100px 200px ;} قيمه اليسار 100 وقيمه الاعلى 200
body{ background-position : 25% 50% ;} قيمه اليسار 25 وقيمه الاعلى 50
body { background-position : bottom right ;}
------------------------------------------------------------------------------------------------------------
6-Background:الخاصيه التى يمكن تجميع كل الخواص السابقه فى سطر واحد ..
body {background: background-color background-Image background-repeat background-attachment background-position ;}
body { background: red url("mm.jpg") no-repeat scroll right bottom ;}
----------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------
التطبيق .. بالطريقه الاولى لكتابه الكود
التطبيق .. بالطرقه الثانيه لكتابه الكود
الآن .. أختبـــــــــــــــــــــــــــــ(ـنفسك)ــــــــــــــــــــــــــــــــــــــر..
1- انسخ كل كود على حدا على برنامج ++Notepad وشاهد النتيجه بنفسك
2- اكتب الكود بالطريقه الثالثه وشاهد النتجيه بنفسك