ویژگی background-position در css

زبان css

کلمهcss مخفف کلمه Cascading Style Sheet  است.

زبان css یک زبان کمکی برای توصیف عناصر html است. این زبان به شما کمک می کند که سایت را به شکل بهتری نمایش دهیم.زبان css یکی از مهمترین زبان های html است. 

در اصل شما هر تگی را درhtml می نویسید. مثل انسانی است که شما دارید می سازید و زبان css ظاهر این انسان است. مثل لباسش،قدش و..... .

در زبان css  یک ویژگی به نام  background داریم که در جلوتر به آن خواهیم پرداخت.

background  چیست؟؟

 background در زبان فارسی به معنی زمینه است.

background نوعی فرمان در زبان css است. که می تواند زمینه تگ مورد نظر را تغییر دهد.

به عنوان مثال: رنگ صفحه ، رنگ متن و............. 

ویژگی background-position 

 شما زمانی که عکسی را در زبان css قرار می دهید،عکس به صورت پیش فرض در بالا سمت چپ صفحه قرار می گیرد.

این ویژگی background-position محل قرار گرفتن عکس را مشخص می کند. به عنوان مثال: عکس در وسط صفحه قرار می گیرد.

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

در ویژگی background-position ما مقادیر زیادی داریم که از آنها می توانید استفاده کنیم. 

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

مقادیر اصلی

• ​​​​​​​مقدارtop: در این مقدار عکس در بالای گزینشگر قرار می گیرد.

<style>
 body {background-position:top; }
</style>

• مقدارcenter: در این مقدار عکس در وسط گزینشگر قرار می گیرد.

<style>
 body {background-position:center; }
</style>

• مقدارbottom: در این مقدار عکس در پایین گزینشگر قرار می گیرد.

<style>
 body {background-position:bottom; }
</style>

• مقدار left: در این مقدار عکس در سمت چپ گزینشگر قرار می گیرد.

<style>
    body{ background-position: left; }
 </style>

•  مقدار right: در این مقدار عکس در سمت راست گزینشگر قرار می گیرد.

<style>
    body{ background-position: right; }
 </style>

مقادیر ترکیبی

• مقدار left top : در این مقدار عکس در بالا سمت چپ گزینشگر قرار می گیرد.

 <style>
    body{ background-position:  left top; }
 </style>

•  مقدارleft center : در این مقدار در مرکز سمت چپ گزینشگر قرار می گیرد.

 <style>
    body{ background-position:  left center; }
 </style>

•  مقدار left bottom : در این مقدار عکس در پایین سمت چپ گزینشگر قرار می گیرد.

<style>
    body{ background-position:left bottom; }
 </style>

•  مقدار right top : در این مقدار عکس در بالا سمت راست گزینشگر قرار می گیرد.

 <style>
    body{ background-position:right top; }
 </style>

•  مقدار right center : در این مقدار عکس در مرکز سمت راست گزینشگر قرار می گیرد.

 <style>
    body{ background-position:right center; }
 </style>

•  مقدار right  bottom : در این مقدار عکس در پایین سمت راست گزینشگر قرار می گیرد.

 <style>
    body{ background-position:right bottom; }
 </style>

•  مقدار center top : در این مقدار عکس در مرکز بالا گزینشگر قرار می گیرد.

<style>
    body{ background-position:center top; }
 </style>

•  مقدار center center : در این مقدار عکس در مرکز (از نظر افقی و عمودی) گزینشگر قرار می گیرد.

<style>
    body{ background-position: center center; }
 </style>

•  مقدار  center bottom : در این مقدار عکس در مرکز پایین گزینشگر قرار می گیرد.

<style>
    body{ background-position:  center bottom; }
 </style>

 موفق باشید.