از خاصیت پس زمینه ( background ) در CSS برای تعیین یک رنگ یا تصویر به عنوان پس زمینه یک عنصر مثل جدول یا صفحه استفاده می شود .

خاصیت background :

خاصیت چند مقداری برای دریافت کلیه ویژگی های پس زمینه عنصر است که هر یک از ویژگی ها باید به ترتیب زیر در خاصیت background وارد شود :

background : [ backgronud-color ] [ background-image ] [ background-repeat ] [ background-attachement ] [background-position ]

توجه : هر یک از خواص فوق را می توان به صورت تکی نیز ، تعریف و مقدار دهی کرد . به مثال های پایین صفحه دقت کنید .

در  زیر هر یک از ویژگی های فوق را بررسی می کنیم :

background-color:

تعیین کننده یک رنگ به عنوان پس زمینه عنصر است . رنگ میتواند به روش های زیر تعیین شود :

  1. نام رنگ مثل blue یا red .
  2. تعیین رنگ به وسیله تابع rgb به صورت زیر :
    ( مقدار رنگ قرمز ، مقدار رنگ سبز ، مقدار رنگ آبی ) rgb
    این تابع مقدار ۳ رنگ را با هم ترکیب کرده و یک رنگ را ایجاد می کند .که مقدار رنگ توسط عددی بین ۰ تا ۲۵۵ تعیین می شود ، که هر چه عدد بزرگتر باشد میزان آن رنگ در کل رنگ بیشتر خواهد بود .
    Example : rgb (10,65,232)
  3. نعیین رنگ به صورت عددی ترکیبی در مبنای ۱۶ هگزادسیمال :
    میزان رنگ آبی میزان رنگ سبز میزان رنگ قرمز #                                                                                               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 : در سمت راست عنصر .