ویژگی (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 آشنا شدیم.
توسعه دهندگان
احسان اسلامی