از خاصیت پس زمینه ( background ) در CSS برای تعیین یک رنگ یا تصویر به عنوان پس زمینه یک عنصر مثل جدول یا صفحه استفاده می شود .
خاصیت background :
خاصیت چند مقداری برای دریافت کلیه ویژگی های پس زمینه عنصر است که هر یک از ویژگی ها باید به ترتیب زیر در خاصیت background وارد شود :
background : [ backgronud-color ] [ background-image ] [ background-repeat ] [ background-attachement ] [background-position ]
توجه : هر یک از خواص فوق را می توان به صورت تکی نیز ، تعریف و مقدار دهی کرد . به مثال های پایین صفحه دقت کنید .
در زیر هر یک از ویژگی های فوق را بررسی می کنیم :
background-color:
تعیین کننده یک رنگ به عنوان پس زمینه عنصر است . رنگ میتواند به روش های زیر تعیین شود :
- نام رنگ مثل blue یا red .
- تعیین رنگ به وسیله تابع rgb به صورت زیر :
( مقدار رنگ قرمز ، مقدار رنگ سبز ، مقدار رنگ آبی ) rgb
این تابع مقدار ۳ رنگ را با هم ترکیب کرده و یک رنگ را ایجاد می کند .که مقدار رنگ توسط عددی بین ۰ تا ۲۵۵ تعیین می شود ، که هر چه عدد بزرگتر باشد میزان آن رنگ در کل رنگ بیشتر خواهد بود .
Example : rgb (10,65,232) - نعیین رنگ به صورت عددی ترکیبی در مبنای ۱۶ هگزادسیمال :
میزان رنگ آبی میزان رنگ سبز میزان رنگ قرمز # Example : #08FF00
background-image:
مسیر کامل یک عکس را که قرار است به عنوان پس زمینه عنصر استفاده شود ، را تعیین می کند .
background-repea:
چنانچه عکس انتخابی به عنوان پس زمینه یک عنصر از اندازه آن عنصر کوچکتر باشد ، تعیین می کند که آیا با تکرار عکس در سطح پس زمینه عنصر ، کل آنرا بپوشاند یا خیر . که حالت های تکرار به صورت زیر می تواند باشد :
– repeat : عکس در جهت افقی و عمودی تکرار خواهد شد .
– repeat-x : عکس فقط در جهت محورها x ها یعنی افقی تکرار خواهد شد .
– repaet-y : عکس فقط در جهت محور y ها یعنی عمودی تکرار خواهد شد .
– no-repaet : عکس در هیچ جهتی تکرار نخواهد شد ، که انتخاب پیش فرض است
background-attachement:
تعیین می کند کند که آیا عکسی که به عنوان پس زمینه عنصر انتخاب شده است ، ثابت باشد و یا با حرکت عنصر در هنگام بالا و پایین رفتن صفحه ، آن عکس نیز حرکت کند . این مسئله در مواردی مثل تعیین پس زمینه برای کل یک صفحه که در آن اندازه عکس بزرگتر از کل محدوده قابل نمایش در مرورگر است ، کاربرد دارد . که ۲ حالت زیر را می تواند داشته باشد :
– scroll : عکس با حرکت عنصر حرکت می کند .
– fixed : عکس ثابت بوده و با حرکت عنصر حرکت نمی کند .
background-position:
مکان شروع قرارگیری عکس را در پس زمینه عنصر تعیین می کند . این حالت معمولا در هنگام کوچکتر بودن عکس از پس زمینه عنصر کاربرد دارد و می تواند یکی از حالت های زیر باشد :
– top : بالای عنصر .
– bottom : پایین عنصر
– center : در مرکز عنصر .
– left : در سمت چپ عنصر .
– right : در سمت راست عنصر .
