دروس css الخلفيات

تستخدم الخلفيات في خلفيه الصفحه او خلفبه النصوص





مثال

<style type="text/css">

#aaa

{

background-color:#b0c4de;

}

#bbb

{

background-image:url('http://www.google.com/images/feed-icon.gif');

}

#ccc

{

background-image:url('http://www.google.com/images/feed-icon.gif');

background-repeat:repeat-x;

}

#ddd

{

background-image:url('http://www.google.com/images/feed-icon.gif');

background-repeat:no-repeat;

background-position:center center ;

}

</style>

مشاهد معاينه الكود

مثال خلفيه الوان background-color

background-color تحمل قيمه اسم الون او رقمه او RGT

خلفيه صوره background-image:url

تكرر الصور ه background-repeat
background-repeat تحديد التكرر
background-repeat:repeat-x; تكرر افقيا
background-repeat:repeat-y; تكرر عمودا
background-repeat:no-repeat;  بدون تكرر

موقع الصوره background-position

القيمه	التفاصيل
left top left center left bottom right top right center right bottom center top center center center bottom	يتم تحدد موقع الصور حسب المكان
x% y%	تم تحديد الصور حسب بكسل
xpos ypos	تم تحديد الصور حسب افقيا و عمودا
inherit	يتم تحديد اعدادات خاصه لعنصر

موقع الخلفيه background-attachment

background-attachment:fixed; نوع الصوره ثابت

 background-attachment:scroll;

background-attachment:inherit;

  

التفاصيل

الخاصيه	القيمه	الوصف
background	background-color background-image background-repeat background-attachment background-position inherit	مجموعات كل واحدة في خصائص الخلفية
background-attachment	scroll fixed inherit	يحدد إذا كان صورة خلفية ثابته أو متحركع مع بقية الصفحة
background-color	color transparent inherit	يحدد لون خلفية عنصر
background-image	url('URL') none inherit	تعيين صورة خلفية لعنصر
background-position	left top left center left bottom right top right center right bottom center top center center center bottom ---------------- x% y% ---------------- xpos ypos ------------------ inherit	يحدد الموقع صورة خلفية
background-repeat	repeat repeat-x repeat-y no-repeat inherit	مجموعات كيف سيتم تكرار صورة خلفية