ویژگی background-position در css
در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد ویژگی background-position در css توضیحاتی را ارائه نماییم. ویژگی کاربردی background-position در اولین نسخه زبان طراحی css یعنی CSS1 معرفی شده است.
معرفی ویژگی کاربردی background-position در زبان طراحی سی اس اس
توسط خاصیت background-position ، مکان یک پس زمینه بر روی تگ html را می توانیم تعیین نماییم. این ویژگی بر اساس 5 کلمه کلیدی top , bottom , right , left و center می تواند مکان یک پس زمینه را برای یک تگ html تعیین کند.
همچنین خاصیت background-position می تواند با مقدار درصدی و یا مقدار طولی ( در محور x و y ) مکان یک پس زمینه را در تگ html مربوطه تعیین نماید.
مقادیر صفت background-position در زبان طراحی css
صفت background-position که در زبان طراحی CSS1 معرفی شده است، 7 مقدار می پذیرد که عبارتند از:
- مقدار left به همراه مقادیر ترکیبی ( left top , left bottom , left center )
- مقدار right به همراه مقادیر ترکیبی ( right top , right bottom , right center )
- مقدار center به همراه مقادیر ترکیبی ( center top , center bottom , center center )
- مقدار y %x%
- مقدار ypos xpos
- مقدار initial
- مقدار inherit
مقدار left به همراه مقادیر ترکیبی ( left top , left bottom , left center ) درون ویژگی background-position در css
اگر برای خاصیت background-position را برابر با مقدار left قرار دهیم، در حقیقت تصویر پس زمینه بر روی تگ html مربوطه در موقعیت لبه سمت چپ آن می چسبد.
مثال براساس مقدار left برای خاصیت background-position
div{background-position:left;}
مثال برای مقادیر ترکیبی با کلمه کلیدی left در خاصیت background-position
div{background-position:left top;}
در این حالت تصویر پس زمینه تگ html مربوطه به انتهای لبه چپ و بالای آن می چسبد.
div{background-position:left bottom;}
در این حالت تصویر پس زمینه تگ html مربوطه به انتهای لبه چپ و پایین آن می چسبد.
div{background-position:left center;}
در این حالت تصویر پس زمینه تگ html مربوطه به لبه چپ و مرکزی آن می چسبد.
مقدار right به همراه مقادیر ترکیبی ( right top , right bottom , right center ) درون ویژگی background-position در css
اگر خاصیت background-position را برابر با مقدار right قرار دهیم، در حقیقت تصویر پس زمینه تگ html مربوطه در جهت محور x تکرار می شود.
مثال براساس مقدار right برای خاصیت background-position
div{background-position:right;}
مثال برای مقادیر ترکیبی با کلمه کلیدی right در خاصیت background-position
div{background-position:right top;}
در این حالت تصویر پس زمینه تگ html مربوطه به انتهای لبه راست و بالای آن می چسبد.
div{background-position:right bottom;}
در این حالت تصویر پس زمینه تگ html مربوطه به انتهای لبه راست و پایین آن می چسبد.
div{background-position:right center;}
در این حالت تصویر پس زمینه تگ html مربوطه به لبه راست و مرکزی آن می چسبد.
مقدار center به همراه مقادیر ترکیبی ( center top , center bottom center center ) درون ویژگی background-position در css
اگر خاصیت background-repeat را برابر با مقدار center قرار دهیم، در حقیقت تصویر پس زمینه تگ html مربوطه در جهت محور x تکرار می شود.
مثال براساس مقدار center برای خاصیت background-position
div{background-position:center;}
مثال برای مقادیر ترکیبی با کلمه کلیدی center در خاصیت background-position
div{background-position:center top;}
در این حالت تصویر پس زمینه تگ html مربوطه به انتهای لبه مرکزی و بالای آن می چسبد.
div{background-position:center bottom;}
در این حالت تصویر پس زمینه تگ html مربوطه به انتهای لبه مرکزی و پایین آن می چسبد.
div{background-position:center center;}
در این حالت تصویر پس زمینه تگ html مربوطه به ناحیه مرکزی و مرکزی آن می چسبد.
مقدار y %x% درون خاصیت background-position در زبان css
اگر خاصیت background-position را برابر با مقدار y %x% قرار دهیم، در این حالت تصویر پس زمینه تگ html مربوطه در هیچ کدام از جهت ها در محور x و y تکرار نمی شود.
مثال براساس مقدار y %x% ( درصد براساس محور x و y ) برای خاصیت background-position
div{background-position:20% 60%;}
مقدار ypos xpos درون ویژگی background-position در css
اگر خاصیت background-position را برابر با مقدار ypos xpos قرار دهیم، باعث می شوند تا تصویر پس زمینه به اندازه ای که در تگ html مربوطه فضا وجود دارد، تکرار شود.
البته فضاهای خالی باقی مانده بین تکرارها بصورت مساوی تقسیم می شود.
مثال براساس مقدار ypos xpos ( مقدار طولی براساس محور x و y ) برای خاصیت background-position
div{background-position:70px 30px;}
مقدار initial درون خاصیت background-position در زبان سی اس اس
اگر خاصیت background-position را برابر با مقدار initial تعریف کنیم، در حقیقت همان مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.
ویژگی background-position در css | مکان پس زمینه
مقدار inherit درون ویژگی background-position در css
اگر خاصیت background-position را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه ، خصوصیت مذکور را از والد پدری خود به ارث می برد.
بررسی خاصیت background-position از نظر نسخه زبان طراحی css
ویژگی کاربردی background-position در اولین نسخه زبان طراحی css یعنی CSS1 معرفی شده است.
بررسی ساختاری ویژگی background-position در css
عناوین ساختاری خاصیت background-position | وضعیت ساختاری خاصیت background-position |
مقدار پیش فرض | 0% 0% |
قابلیت توارث | ندارد |
قابلیت تحرک | دارد |
ورژن css صفت | CSS1 |
سینتکس صفت در جاوا اسکریپت | "object.style.backgroundPosition="center |
پشتیبانی مرورگرهای اینترنتی از ویژگی background-position در css
خاصیت css | |||||
background-position | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور
برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای آموزش طراحی سایت با HTML5 و CSS3 و Bootstrap و jQuery
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
ویژگی background-position در css | مکان پس زمینه – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید