ویژگی background-position در css
در این مقاله از مجموعه مقالات شرکت طراحی سایت مبنا، قصد داریم اطلاعات جامع در زمینه ویژگی موقعیت پس زمینه در css را برای شما کاربران عزیز ارائه دهیم.
تعریف و کاربرد این ویژگی در طراحی سایت
خاصیت background-position، موقعیت اول تصویر زمینه را تنظیم می کند.
نکته: به صورت پیش فرض، یک تصویر پس زمینه در گوشه بالا سمت چپ یک عنصر قرار می گیرد و در هر دو حالت افقی و عمودی تکرار می شود.
این عنصر در طراحی سایت می تواند مقادیر زیر را به خود بگیرد:
|
توضیحات
|
مقدار
|
|
اگر شما فقط یک کلمه کلیدی را مشخص کنید، سایر مقادیر در "مرکز" قرار خواهند گرفت.
|
(بالا سمت چپ) left top
(مرکز سمت چپ) left center
(پایین سمت چپ) left bottom
(بالا سمت راست) right top
(مرکز سمت راست) right center
(پایین سمت راست) right bottom
(مرکز بالا) center top
(مرکز مرکز) center center
(مرکز پایین) center bottom
|
|
مقدار اول موقعیت افقی است و مقدار دوم عمودی است. گوشه بالا سمت چپ 0٪ 0٪ است. گوشه پایین سمت راست 100٪ 100٪ است. اگر شما فقط یک مقدار مشخص کنید، مقادیر دیگر 50٪. خواهند بود. مقدار پیش فرض 0٪ 0٪ می باشد.
|
X% y%
|
|
مقدار اول موقعیت افقی است و مقدار دوم عمودی است. گوشه بالا سمت چپ 0 0 است. واحد این مقادیر می تواند پیکسل ( 0px 0px) و یا هر واحد دیگری در CSS باشد. اگر شما فقط یک مقدار مشخص کنید، مقادیر دیگر 50٪ خواهد بود. شما می توانید٪ و موقعیت را با هم ترکیب کنید.
|
xpos ypos
|
|
این ویژگی را با مقدار پیش فرض آن تنظیم کنید.
|
Initial
|
|
این مقدار را از عنصر والد آن دریافت کنید.
|
Inherit
|
در مقالات بعدی اطلاعات بیشتری را در زمینه ویژگی های css و کاربرد آن در طراحی سایت برای شماعلاقه مندان به این حرفه شرح خواهیم داد.