ویژگی background-position در CSS

ویژگی background-position، مکان تصویر پس زمینه را مشخص می کند.

این ویژگی مکان قرارگیری پس زمینه در دو محور x و y  مشخص می کند.

background-position: y x;

ویژگی background-position، به دو صورت متنی و عددی مقداردهی می شود.

مقداردهی متنی (background-position) در CSS

در محور 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;

مقداردهی عددی (background-position) در CSS

در مقداردهی عددی می توان از عدد با واحدهای مختلف (%، 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 آشنا شدیم.
  • همچنین به مقداردهی متنی و مقداردهی عددی پی بردیم.

توسعه دهندگان
احسان اسلامی