اندازه ی پس زمینه (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:

  • اندازه ی پس زمینه
  • کلمه ی کلیدی
  • مقدار عددی

آشنا شدیم.

توسعه دهندگان
احسان اسلامی