خصوصیت background-size

مثال

مشخص کردن اندازه عکس پس زمینه:

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.

پشتیبانی مرورگرها

    

تمام مرورگرهای اصلی، خصوصیت background-size را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، خصوصیت background-size را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خاصیت background-size می توانید اندازه تصویر پس زمینه را مشخص نمایید.

مقدار پیشفرض auto
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.backgroundSize="60px 80px"

نحوه استفاده

background-size: length|percentage|cover|contain;
مقدار توضیحات نمایش دادن
length width و height عکس پس زمینه را تنظیم می کند. اولین مقدار width و دومی height است. اگر فقط یک مقدار تنظیم شود، دومی با مقدار "auto" تنظیم می شود.
percentage width و height عکس پس زمینه را بصورت درصدی از عنصر والدش تنظیم می کند. اولین مقدار width و دومی height است. اگر فقط یک مقدار تنظیم شود، دومی با مقدار "auto" تنظیم می شود.
cover اندازه عکس پس زمینه به قدری بزرگ می شود که تمام ناحیه content را بپوشاند. ممکن است مقداری از عکس پس زمینه داخل ناحیه content قرار نگیرد و قابل رویت نباشد.
contain اندازه عکس پس زمینه به قدری بزرگ می شود که در ناحیه content جا شود و در ضمن تمام آن قابل رویت باشد.