آموزش ویژگی اندازه پس زمینه-backgroud-size در CSS

قبلی بعدی

اندازه ی پس زمینه در CSS

با ویژگی background-size در CSS، اندازه ی پس زمینه را مشخص می کنیم.

ویژگی background-size، به سه روش استفاده می شود:

کلمات کلیدی: با کلمات auto - contain - cover.
یک مقدار عددی: تنظیم عرض پس زمینه (ارتفاع روی auto قرار می گیرد.)
دو مقدار عددی: تنظیم عرض (مقدار اول) و ارتفاع (مقدار دوم) پس زمینه

ویژگی background-size در CSS

ویژگی background-size، به صورت پیش فرض دارای مقدار auto است. این ویژگی می تواند سه کلمه کلیدی دریافت کند:

مقدار auto: در این حالت، تصاویر به اندازه ی واقعی خود، بدون توجه به اندازه ی المان نمایش داده می شوند.
مقدار contain: تصویر پس زمنیه، بدون بهم ریختگی نسبت عرض به ارتفاع، کامل نمایش داده شود.
مقدار cover: تصویر پس زمنیه، بدون بهم ریختگی نسبت عرض به ارتفاع، المان را پوشش می دهد.


background-size: auto;
background-size: contain;
background-size: cover;

مقدار عددی در CSS background-size

ویژگی background-size، می تواند مقدار عددی نیز دریافت کند.

مقدار اول، عرض (width) و مقدار دوم، ارتفاع (height) است.

background-size: width height;

نکته: اگر مقدار دوم وارد نشود، auto در نظر گرفته می شود و به نسبت عرض تغییر می کند.


background-size: 300px 100px;
background-size: 100% 100%;
background-size: auto 200px;
background-size: 100px auto;
background-size: 100px; /* 100px auto */