سلام به همه پی وی لرنی های عزیز!
به دوره آموزش ویژگی های CSS خوش آمدید. CSS مخفف Cascade Style Sheets است که توسط W3C یا کنسرسیوم جهانی وب ایجاد شده است. اگر HTML اسکلت و ساختار وب است آنگاه CSS گوشت و پوست وب را تشکیل می دهد که ضعف های HTML را پوشش داده و آن ها را رفع می نماید. در این مجموعه از مجموعه آموزش های پی وی لرن قرار است به سراغ دوره آموزش ویژگی های CSS برویم و شما را با Properties ها یا ویژگی های CSS آشنا کنیم. روند هر جلسه این دوره به این شکل است که هر جلسه اختصاص به یک ویژگی دارد و در هر جلسه نیز برای هر Property یا ویژگی نیز سعی شده با ارائه مثال های مرتبط، یادگیری ویژگی های CSS آسان تر و ماندگارتر شود.
در جلسه قبل با ویژگی background-origin آشنا شدیم؛ این ویژگی (منطقه موقعیت یابی پس زمینه) یک تصویر پس زمینه را مشخص می کند.
در این جلسه قصد داریم به سراغ آموزش کار با ویژگی background-position در CSS برویم.
آموزش کار با ویژگی background-position در CSS
به مثال زیر توجه نمایید. در این مثال نحوه قرار گیری یک تصویر پس زمینه را مشاهده می نمایید.
مثال :
| body { background-image: url('w3css.gif'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; } |
تعریف و کاربرد
ویژگی background-position موقعیت شروع پس زمینه یک تصویر را تنظیم می کند.
نکات و توصیه ها
نکته
به طور پیش فرض، یک تصویر پس زمینه در گوشه سمت چپ بالای یک عنصر قرار می گیرد و به صورت عمودی و افقی تکرار می شود.
| مقدار پیش فرض | ۰% ۰% |
| به ارث بردن | خیر |
| متحرک بودن | بله |
| نسخه | CSS1 |
| سینتکس JavaScript | “object.style.backgroundPosition=”center |
پشتیبانی مرورگر ها
در ادامه آموزش کار با ویژگی background-position در CSS جدولی ارائه کرده ایم که نشان می دهد این ویژگی CSS در چه مرورگر های پشیبانی می شود.
| نام ویژگی |  |  |  |  |  |
| background-position | ۱٫۰ | ۱٫۰ | ۳٫۵ | ۱٫۰ | ۴٫۰ |
نکته
اینترنت اکسپلور ۸ و نسخه های قبل تر از آن از چندین تصویر پس زمینه بر روی یک عنصر پشتیبانی نمی کنند.
سینتکس CSS
مثال :
| background-position: value; |
مقدار ویژگی
| مقدار | توضیحات |
|---|
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom | اگر فقط یک کلمه کلیدی را مشخص کنید، مقدار دیگر به صورت خودکار در وسط یا “center” خواهد بود. |
| x% y% | مقدار اول موقعیت افقی و مقدار دوم عمودی است. گوشه بالا سمت چپ ۰٪ ۰٪ است. گوشه پایین سمت راست ۱۰۰٪ ۱۰۰٪ است. اگر فقط یک مقدار را مشخص کنید ، مقدار دیگر ۵۰٪ خواهد بود.
مقدار پیش فرض: ۰٪ ۰٪ است. |
| xpos ypos | مقدار اول موقعیت افقی و مقدار دوم عمودی است. گوشه بالا سمت چپ ۰ است. واحد می تواند پیکسل (۰px 0px) یا هر واحد CSS دیگر باشد. اگر فقط یک مقدار را مشخص کنید ، مقدار دیگر ۵۰٪ خواهد بود. می توانید٪ و موقعیت ها را با هم مخلوط کنید. |
| initial | ویژگی را به مقدار پیش فرض خود تنظیم می کند. |
| inherit | این ویژگی را از عنصر parent خود به ارث می برد. |
مثال های بیشتر
مثال یک
نحوه قرار دادن یک تصویر پس زمینه که در مرکز قرار دارد:
مثال :
| body { background-image: url('w3css.gif'); background-repeat: no-repeat; background-attachment: fixed; background-position: center top; } |
مثال دو
نحوه قرار دادن تصویر پس زمینه در پایین سمت راست:
مثال :
| body { background-image: url('w3css.gif'); background-repeat: no-repeat; background-attachment: fixed; background-position: bottom right; } |
مثال سه
نحوه قرار دادن تصویر پس زمینه با استفاده از درصد:
مثال :
| body { background-image: url('w3css.gif'); background-repeat: no-repeat; background-attachment: fixed; background-position: 50% 50%; } |
مثال چهار
نحوه قرار دادن تصویر پس زمینه با استفاده از پیکسل ها:
مثال :
| body { background-image: url('w3css.gif'); background-repeat: no-repeat; background-attachment: fixed; background-position: 50px 150px; } |
مثال پنج
ایجاد یک تصویر “hero” با استفاده از ویژگی های مختلف پس زمینه :
مثال :
| .hero-image { background-image: url("photographer.jpg"); /* The image used */ background-color: #cccccc; /* Used if the image is unavailable */ height: 500px; /* You must set a specified height */ background-position: center; /* Center the image */ background-repeat: no-repeat; /* Do not repeat the image */ background-size: cover; /* Resize the background image to cover the entire container */ } |
کلام آخر
در این جلسه به آموزش کار با ویژگی background-position در CSS پرداختیم؛ ویژگی background-position موقعیت شروع پس زمینه یک تصویر را تنظیم می کند.
در جلسه بعدی به کار با ویژگی background-repeat خواهیم پرداخت.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
