ویژگی background-size در CSS

قبلی بعدی

ویژگی (Background-size) در CSS

با ویژگی background-size در CSS، اندازه پس زمینه یک المان را تعیین می کنیم.

ویژگی background-size، چهار روش مختلف برای استفاده دارد، که عبارت اند از:

keyword-syntax: تنظیم سایز پس زمینه
the one value-syntax: تنظیم عرض پس زمینه
the two value-syntax: تنظیم عرض و ارتفاع پس زمینه
the multiple background-syntax: محدود کردن اندازه پس زمینه

کلمه کلیدی (keyword-syntax) در CSS

نکته: در استفاده از background-size، می توان از سه کلمه کلیدی استفاده کرد که درحالت پیش فرض روی auto قرار دارد، که در ادامه با آن بیشتر آشنا خواهید شد.

background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: contain;

background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: cover;

 background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;

 background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: auto;

 background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: 300px 100px;

نکته: برای مثال در روش two value-syentax که دو مقدار دریافت می کند، اگر فقط یک مقدار داده شود مقدار دوم روی auto تنظیم می شود.

.hero-image {
  background-image: url("photographer.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

خلاصه درس

در این درس با ویژگی background-size در CSS آشنا شدیم.

قبلی بعدی

توسعه دهندگان

احسان اسلامی