background-color

 

برای تغییر در رنگ زمینه هر چیزی مثل صفحه وب یا جدول یا یک سطر از جدول یا یک سلول جدول یا زمینه یک لایه بکار می رود

 

background-color:رنگ;

 مثال :

body {background-color:#b0c4de;}
رنگ زمینه صفحه وب را تغییر می دهد
 
 
مشاهده و اجرای برنامه کامل
مثال :
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
خط 1:
رنگ زمینه محتوای تمام تگ های h1 در صفحه وب
خط 2:
رنگ زمینه مجتوای تمام تگ های p در صفحه وب
خط 3:
رنگ زمینه محتوای  تمام تگ های div در صفحه وب
مشاهده و اجرای برنامه کامل

 


background-image

 

 

برای تغییر در تصویر زمینه هر چیزی مثل صفحه وب یا جدول یا یک سطر از جدول یا یک سلول جدول یا زمینه یک لایه بکار می رود

 

روش استفاده :

 

background-image :url("ادرس و نام تصویر همراه پسوند آن");

 

مثال :

 

body {background-image:url('paper.gif');}
تصویری به نام paper.gif را در زمینه صفحه وب قرار می دهد
مشاهده و اجرای برنامه کامل

background-repeat

روش تکرار شدن تصویر زمینه را مشخص می کند

 

background-repeat:no-repeat;

background-repeat:repeat-x;

background-repeat:repeat-y;

background-repeat:repeat;

بصورت عملی مشاهده کنید

 

فرمول اول

اصلا تصویر در زمینه تکرار نشود و فقط یک نمونه از ان نشان داده شود

مثال

body
{
background-image:url('gradient2.png');
background-repeat:no-repeat;
}

مشاهده و اجرای برنامه کامل

 

فرمول دوم

 

از تصویر فقط یک ردیف افقی  در صفحه  تکرار شود

 

مثال

 

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

مشاهده و اجرای برنامه کامل

 

فرمول سوم

 

از تصویر فقط یک ردیف عمودی در صفحه تکرار شود

 

فرمول چهارم

تصویر در جهت افقی و عمودی انقدر تکرار می شود تا تمام صفحه را پر کند

 


background-position

در صورتیکه no -repeat را انتخاب کرده اید می توانید محل نمایش داده شدن تصویر زمینه در صفحه وب را مشخص کنید

 

مثال:

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

 

خط 5:

تصویر زمینه را در بالا و سمت راست صفحه وب قرار می دهد

مشاهده و اجرای برنامه کامل

 

روش تعیین محل

 

روش اول

از عبارات زیر استفاده کنید :

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

مشاهده برنامه

روش دوم :

x%  y%

تعیین محل تصویر بر حسب درصد

گوشه بالا و سمت چپ صفحه مرورگر برابر 0%,0%

گوشه پائین  و سمت راست مرورگر برابر 100% , 100%

اگر شما فقط یکی از مقادیر را مشخص کنید دیگری برابر 50% خواهد شد

مقدار پیش فرض برابر 0% و 0% است

مشاهده برنامه

روش سوم :

 موقعیت قرار گیری تصویر زمینه را بر حیب پیکسل بیان نمائید

گوشه بالا و سمت چپ صفحه 0و0

واحد اندازه گیری می تواند پیکسل و یا هر واحد دیگری باشد  مشاهده واحدها

اگر فقط یکی از x یا y را مشخص کنید دیگری برابر 50% خواهد شد

شما می توانید درصد و عدد را با هم بکار ببرید

مشاهده برنامه

background

 

می توان تمامی ویژگیهای بالا را در یک ویژگی نوشت و بین انها جای خالی قرار داد

 

background:#ffffff url('img_tree.png') no-repeat right top;

 

اولین گزینه = رنگ

دومین گزینه = ادرس تصویر

سومین گزینه = روش تکرار تصویر زمینه

چهارمین گزینه و پنجمین گزینه = محل تصویر زمینه در صورت تکراری نبودن ان

مشاهده و اجرای برنامه کامل