X
انجمن برنامه نویسی آموزش CSS

ویژگی background-position در Css

ویژگی 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 و کاربرد آن در طراحی سایت برای شما علاقه‌مندان به این حرفه شرح خواهیم داد.

Print
نظرات بسته شده است.
دی ان ان