Свойство CSS background-size
Пример
Укажите размер фонового изображения с «авто» и в пикселях:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}
#example2 {
background: url(mountain.jpg);
background-repeat:
no-repeat;
background-size: 300px 100px;
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство background-sizeуказывает размер фоновых изображений.
Существует четыре различных синтаксиса, которые вы можете использовать с этим свойством: синтаксис ключевого слова ("авто", "обложка" и "содержать"), синтаксис с одним значением (устанавливает ширину изображения (высота становится "авто"), синтаксис с двумя значениями (первое значение: ширина изображения, второе значение: высота) и синтаксис множественного фона (разделенные запятой).
| Значение по умолчанию: | авто |
|---|---|
| Унаследовано: | нет |
| Анимация: | да. Читать об анимации |
| Версия: | CSS3 |
| Синтаксис JavaScript: | объект .style.backgroundSize="60px 120px" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следует -webkit-, -moz- или -o-, указывают на первую версию, которая работала с префиксом.
| Property | |||||
|---|---|---|---|---|---|
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
Синтаксис CSS
background-size: auto|length|cover|contain|initial|inherit;
Значения свойств
| Value | Description | Play it |
|---|---|---|
| auto | Default value. The background image is displayed in its original size | |
| length | Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Read about length units | |
| percentage | Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto" | |
| cover | Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges | |
| contain | Resize the background image to make sure the image is fully visible | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Дополнительные примеры
Пример
Укажите размер фонового изображения в процентах:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100%
100%;
}
#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 75%
50%;
}
Пример
Укажите размер фонового изображения с «обложкой»:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}
Пример
Укажите размер фонового изображения с помощью «содержать»:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain;
}
Пример
Здесь у нас есть два фоновых изображения. Мы указываем размер первого фонового изображения с помощью «contain», а второго фонового изображения с «обложкой»:
#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain, cover;
}
Пример
Используйте различные свойства фона, чтобы создать изображение «героя»:
.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 */
}
Связанные страницы
Учебное пособие по CSS: CSS-фоны
Справочник по HTML DOM: свойство backgroundSize