ویژگی (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 آشنا شدیم.

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