راهنمای استفاده از دستور background-size در CSS
یکی از دستورات CSS که به تنهایی یا به صورت ترکیبی در طراحی سایت کاربرد زیادی دارد، دستور background-size است. این دستور مشخص می‌کند که تصویر پس‌زمینه در چه ابعادی نمایش داده شود.
با توجه به اینکه اندازه‌ی تصویر و اندازه‌ی عنصر نمایش‌دهنده‌ی تصویر مخصوصا در طراحی سایت واکنش‌گرا متغیر است، لازم است تا تصویر در تمامی حالت‌ها به شکلی مناسب قابل مشاهده باشد.
این دستور چندین مقدار می‌پذیرد:
| مقدار | توضیحات |
|---|---|
| auto | حالت پیش‌فرض. تصویر در ابعاد اصلی نمایش داده می‌شود. |
| length | اندازه‌ی تصویر به صورت مشخص تعیین می‌شود. ابتدا اندازه افقی و سپس اندازه‌ی عمودی تصویر در این حالت قابل تعریف هستند. با تایپ auto، یکی از اندازه‌ها بر اساس اندازه‌ی دیگر به صورت خودکار تغیین می‌شود. برای مثال: 100px auto |
| percentage | اندازه‌ی تصویر می‌تواند بر اساس درصدی از عنصر نگهدارنده تعیین شود. مثلا: %50 %50 |
| cover | تصویر به صورت خودکار آنقدر بزرگ یا کوچک می‌شود تا تمام فضای عنصر نگهدارنده پوشش داده شود. با این کار ممکن است بخش‌هایی از تصویر از حاشیه‌هایی بالایی یا کنار بیرون بروند. |
| contain | تصویر به شکلی تغییر اندازه پیدا می‌کند که هیچ قسمتی از آن بیرون از عنصر نگهدارنده نباشد و کاملا قابل مشاهده شود. |
| initial | مقدار اولیه‌ی تعریف شده توسط مرورگر را در نظر می‌گیرد. |
| inherit | مقدار خود را از عنصر والد به ارث می‌برد. |
استفاده‌ی ترکیبی
این دستور می‌تواند به صورت تکی یا به صورت ترکیبی با دستور background استفاده شود:
|
1 2 3 4 5 6 7 8 |
.p1 { background-image: url( 'roka.jpg' ); background-size: cover; } .p2 { background: url( 'roka.jpg' ) center center / cover; } |
همان طور که در مثال بالا مشاهده می‌کنید، برای استفاده‌ی ترکیبی از background-size لازم است تا از یک علامت ممیز( Slash ) پس از مقدار background-position مقابل دستور background استفاده کنیم.
نکات دیگر
هنگام استفاده از background-size معمولا لازم است تا مقدار background-repeat و background-position را هم تغییر دهیم تا جلوی تکرار تصویر گرفته شود و تصویر در محل دلخواه ما نمایش داده شود. یک مثال کامل‌تر و کاربردی می‌تواند به شکل زیر باشد:
|
1 2 3 4 5 6 7 8 9 10 |
.add-button { width: 32px; height: 32px; display: block; background-image: url( 'add.png' ); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; } |
برای اینکه بتوانید روی نمایش تصاویر مخصوصا هنگام طراحی سایت واکنش‌گرا، به مهارت لازم دست پیدا کنید، لازم است تا به مقدار کافی تمرین و مطالعه داشته باشید تا بتوانید سایت‌هایی با کیفیت و با رعایت اصول فنی لازم را آماده‌سازی نمایید.