ویژگی background-position در CSS
ویژگی background-position، مکان تصویر پس زمینه را مشخص می کند.
این ویژگی مکان قرارگیری پس زمینه در دو محور x و y مشخص می کند.
background-position: y x;ویژگی background-position، به دو صورت متنی و عددی مقداردهی می شود.
مقداردهی متنی در CSS background-position
در محور y از مقادیر:
- top: بالا المان
- center: وسط المان
- bottom: پایین المان
در محور x از مقادیر:
- left: سمت چپ المان
- center: وسط المان
- right: سمت راست المان
با ترکیب این مقادیر می توان، مکان تصویر پس زمینه را مشخص کرد.
background-position: y x;
background-position: top left;
background-position: center right;
background-position: bottom center;
background-position: bottom left;background-position: top left;background-position: top right;background-position: bottom left;background-position: bottom right;مقداردهی عددی در CSS background-position
در مقداردهی عددی می توان از عدد با واحدهای مختلف (%، px، ...) در دو جهت x و y استفاده کرد.
نکته: مقداردهی 0 0 مکان تصویر را در بالا سمت چپ قرار می دهد.
نکته: در مقداردهی عددی، مقدار اول، فاصله از چپ و مقدار دوم، فاصله از بالا است.
background-position: 0 0;نکته: اگر از مقدار درصدی استفاده کنیم، 0% 0% بالا سمت چپ و 100% 100% مکان تصویر را پایین سمت راست قرار می دهد.
background-position: 0% 0%;
background-position: 100% 100%;نکته: اگر فقط یک مقدار را وارد کنیم مقدار دیگر 50% در نظر گرفته می شود.
background-position: 10% 50%;نکته: اگر کلا مقداردهی نشود، مقدار پیش فرض، 0 0 در نظر گرفته می شود.
background-image: url("/pic-2.jpg");
background-repeat: no-repeat;
background-size: 400px;
height: 100vh;خلاصه درس
- در این درس با ویژگی background-position در CSS آشنا شدیم.
- همچنین به مقداردهی متنی و مقداردهی عددی پی بردیم.
احسان اسلامی
