ویژگی background در CSS بخش اول | ویژگی background-color در css

ویژگی background در CSS بخش اول را جهت مطالعه شما همراهان گرامی سایت آموزی تهیه کردیم.

سایت آموزی کلیه property های ایجاد پس زمینه را در چند بخش تدریس می کند.

ویژگی background در CSS بخش اول

ویژگی background در CSS بخش اول | ویژگی background-color در css

ویژگی background در CSS بخش اول | ویژگی background-color در css

بخش اول این مجموعه آموزشی را به معرفی و بررسی دو ویژگی (property) می پردازیم.

ویژگی background-color در css

این property در css به تعیین رنگ برای پس زمینه اشاره می کند.

مثال زیر را توجه کنید که براساس همین property تغییر رنگ پس زمینه در بدنه سایت ایجاد می شود.

 body {background-color: #e0e0e0;}

ویژگی background-repeat در css

یک ویژگی دیگر وجود دارد که بوسیله آن می توانیم نحوه تکرار عکس ها در پس زمینه را مشخص کنیم.

در حقیقت ویژگی background-repeat زمانی کاربرد دارد که یک برش تصویری را به عنوان پس زمینه انتخاب می کنیم.

مقادیر ویژگی background-repeat

  1. no-repeat
  2. repeat
  3. repeat-x
  4. repeat-y
  5. round
  6. space
  7. inherit

1- مقدار no-repeat

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

در این حالت از مقدار no-repeat در ویژگی background-repeat استفاده کنید.

ویژگی background در CSS بخش اول | ویژگی background-color در css

۲- مقدار repeat

گاهی تکه عکسی را به عنوان پس زمینه انتخاب کرده اید که می خواهید در محور x و y تکرار شود.

در این حالت از مقدار repeat در ویژگی background-repeat استفاده کنید.

ویژگی background در CSS بخش اول | ویژگی background-color در css

ویژگی background در CSS بخش اول | ویژگی background-color در css

۳- مقدار repeat-x

گاهی تکه عکسی را به عنوان پس زمینه انتخاب کرده اید که تنها می خواهید در محور x ها (افقی) تکرار شود.

در این حالت از مقدار repeat-x در ویژگی background-repeat استفاده کنید.

ویژگی background در CSS بخش اول | ویژگی background-color در css

۴- مقدار repeat-y

گاهی تکه عکسی را به عنوان پس زمینه انتخاب کرده اید که تنها می خواهید در محور y ها (عمودی) تکرار شود.

در این حالت از مقدار repeat-x در ویژگی background-repeat استفاده کنید.

ویژگی background در CSS بخش اول | ویژگی background-color در css

۵- مقدار round

مقدار round باعث می شود که تصویر با توجه به اندازه اش تا جایی که فضا هست تکرار شود.

و اگر فضایی باقی ماند تکرارها کشیده می شوند، تا اینکه فضاهای خالی پر شوند.

ویژگی background در CSS بخش اول | ویژگی background-color در css

۶- مقدار space

مقدار space باعث می شوند تا تصویر به تعدادی که در عنصر جا می شود تکرار شود.

و فضاهای خالی باقی مانده بین تکرارها بصورت مساوی تقسیم می شود.

ویژگی background در CSS بخش اول | ویژگی background-color در css

ویژگی background در CSS بخش اول | ویژگی background-color در css

۷- مقدار inherit

این مقدار ویژگی نحوه تکرار عکس پس زمینه را از والد پدری خود به ارث می برد.

ویژگی background در CSS بخش اول | ویژگی background-color در css – اختصاصی سایت آموزی