راهنمای استفاده از دستور background-size در CSS

یکی از دستورات CSS که به تنهایی یا به صورت ترکیبی در طراحی سایت کاربرد زیادی دارد، دستور background-size است. این دستور مشخص می‌کند که تصویر پس‌زمینه در چه ابعادی نمایش داده شود.

با توجه به اینکه اندازه‌ی تصویر و اندازه‌ی عنصر نمایش‌دهنده‌ی تصویر مخصوصا در طراحی سایت واکنش‌گرا متغیر است، لازم است تا تصویر در تمامی حالت‌ها به شکلی مناسب قابل مشاهده باشد.

این دستور چندین مقدار می‌پذیرد:

مقدار توضیحات
auto حالت پیش‌فرض. تصویر در ابعاد اصلی نمایش داده می‌شود.
length اندازه‌ی تصویر به صورت مشخص تعیین می‌شود. ابتدا اندازه افقی و سپس اندازه‌ی عمودی تصویر در این حالت قابل تعریف هستند. با تایپ auto، یکی از اندازه‌ها بر اساس اندازه‌ی دیگر به صورت خودکار تغیین می‌شود. برای مثال: 100px auto
percentage اندازه‌ی تصویر می‌تواند بر اساس درصدی از عنصر نگهدارنده تعیین شود. مثلا: %50 %50
cover تصویر به صورت خودکار آنقدر بزرگ یا کوچک می‌شود تا تمام فضای عنصر نگهدارنده پوشش داده شود. با این کار ممکن است بخش‌هایی از تصویر از حاشیه‌هایی بالایی یا کنار بیرون بروند.
contain تصویر به شکلی تغییر اندازه پیدا می‌کند که هیچ قسمتی از آن بیرون از عنصر نگهدارنده نباشد و کاملا قابل مشاهده شود.
initial مقدار اولیه‌ی تعریف شده توسط مرورگر را در نظر می‌گیرد.
inherit مقدار خود را از عنصر والد به ارث می‌برد.

استفاده‌ی ترکیبی

این دستور می‌تواند به صورت تکی یا به صورت ترکیبی با دستور background استفاده شود:

همان طور که در مثال بالا مشاهده می‌کنید، برای استفاده‌ی ترکیبی از background-size لازم است تا از یک علامت ممیز( Slash ) پس از مقدار background-position مقابل دستور background استفاده کنیم.

نکات دیگر

هنگام استفاده از background-size معمولا لازم است تا مقدار background-repeat و background-position را هم تغییر دهیم تا جلوی تکرار تصویر گرفته شود و تصویر در محل دلخواه ما نمایش داده شود. یک مثال کامل‌تر و کاربردی می‌تواند به شکل زیر باشد:

برای اینکه بتوانید روی نمایش تصاویر مخصوصا هنگام طراحی سایت واکنش‌گرا،‌ به مهارت لازم دست پیدا کنید، لازم است تا به مقدار کافی تمرین و مطالعه داشته باشید تا بتوانید سایت‌هایی با کیفیت و با رعایت اصول فنی لازم را آماده‌سازی نمایید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مشاوره رایگان تلفنی
۶۵ ۸۹ ۹۶ ۸۸ - ۰۲۱
۹۱ ۸۴ ۹۶ ۸۸ - ۰۲۱