اندازه ی پس زمینه (background-size) در CSS
با ویژگی background-size در CSS، اندازه ی پس زمینه را مشخص می کنیم.
ویژگی background-size، به سه روش استفاده می شود:
- کلمات کلیدی: با کلمات auto - contain - cover.
- یک مقدار عددی: تنظیم عرض پس زمینه (ارتفاع روی auto قرار می گیرد.)
- دو مقدار عددی: تنظیم عرض (مقدار اول) و ارتفاع (مقدار دوم) پس زمینه
کلمه ی کلیدی در CSS background-size
ویژگی 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 */خلاصه درس
در این درس با ویژگی background-size در CSS:
- اندازه ی پس زمینه
- کلمه ی کلیدی
- مقدار عددی
آشنا شدیم.
توسعه دهندگان
احسان اسلامی
