ویژگی background در CSS بخش دوم background-position

ویژگی background در سی اس اس بخش دوم را در این سری آموزشی سایت آموزی برای شما خوبان تدارک دیدیم.

در بخش اول این مجموعه آموزشی با دو ویژگی background-color و background-repeat در css آشنا شدید.

ویژگی background در CSS بخش دوم

ویژگی background در CSS بخش دوم background-position - سایت آموزی

در این بخش نیز شما عزیزان را با دو ویژگی دیگر در سری مقالات background در css آشنا می کنیم.

در بخش دوم این آموزش دو ویژگی background-position و background-attachment را مورد بررسی قرار می دهیم.

ویژگی background-position در css

ویژگی backgroundposition برای موقعیت یا جهت دادن به تصویر پس زمینه به کار می رود.

این ویژگی ۶ مقدار می گیرد که عبارتنداز:

  1. مقدار bottom
  2. مقدار center
  3. مقدار left
  4. مقدار right
  5. مقدار top
  6. مقدار inherit

۱- مقدار bottom در ویژگی background-position

مقدار bottom موقعیت قرارگیری تصویر پس زمینه را در پایین عنصر مورد نظر تعیین می کند.

۲- مقدار center در ویژگی background-position در سی اس اس

مقدار center موقعیت قرارگیری تصویر پس زمینه را در مرکز یا وسط عنصر مورد نظر تعیین می کند.

۳- مقدار left در ویژگی background-position

مقدار left موقعیت قرارگیری تصویر پس زمینه را در سمت چپ عنصر مورد نظر تعیین می کند.

۴- مقدار right در ویژگی background-position در سی اس اس

مقدار right موقعیت قرارگیری تصویر پس زمینه را در سمت راست عنصر مورد نظر تعیین می کند.

۵- مقدار top  در ویژگی background-position

مقدار top موقعیت قرارگیری تصویر پس زمینه را در بالای عنصر مورد نظر تعیین می کند.

۶- مقدار inherit در ویژگی background-position در سی اس اس

مقدار inherit موقعیت قرارگیری تصویر پس زمینه را همانند عنصر والد پدری تعیین می کند.

یعنی والد پدری هر موقعیتی پس زمینه اش قرار گیرد با انتخاب inherit این خصوصیت از والد به فرزند به ارث می رسد.

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

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