background-size
Пример
Укажите размер фонового изображения с "auto" и в пикселях:
#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 определяет размер фоновых изображений.
Существует четыре различных синтаксиса, которые можно использовать с этим свойством: синтаксис ключевого слова ("auto", "cover" и "contain"), синтаксис с одним значением (задает ширину изображения (высота становится "auto"), синтаксис с двумя значениями (первое значение: ширина изображения, второе значение: высота) и множественный синтаксис фона (разделенный запятой).
| Значение по умолчанию: | auto |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | да. Прочитать о animatable Редактор кода |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.backgroundSize="60px 120px" Редактор кода |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Числа, за которыми следуют -webkit-, -moz-, или -o- указывают первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| 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;
Значение свойств
| Значение | Описание | Воспроизвести |
|---|---|---|
| auto | Значение по умолчанию. Фоновое изображение отображается в исходном размере | Воспроизвести » |
| length | Задает ширину и высоту фонового изображения. Первое значение задает ширину, второе значение задает высоту. Если задано только одно значение, то второе имеет значение quot;auto". Прочитать Единицы длинЫ | Воспроизвести » |
| percentage | Задает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение задает ширину, второе значение задает высоту. Если задано только одно значение, то второе имеет значение "auto" | Воспроизвести » |
| cover | Измените размер фонового изображения, чтобы покрыть весь контейнер, даже если он должен растянуть изображение или немного отрезать один из краев | Воспроизвести » |
| contain | Измените размер фонового изображения, чтобы убедиться, что изображение полностью видно | Воспроизвести » |
| initial | Задает этому свойству значение индекса. Прочитать о initial | Воспроизвести » |
| inherit | Наследует это свойство от родительского элемента. Прочитать о 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%;
}
Редактор кода »
Пример
Укажите размер фонового изображения с помощью "cover":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}
Редактор кода »
Пример
Укажите размер фонового изображения с помощью "contain":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain;
}
Редактор кода »
Пример
Здесь у нас есть два фоновых изображения. Мы указываем размер первого фонового изображения с "contain", и второе фоновое изображение с& quot;cover":
#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain, cover;
}
Редактор кода »
Связанные страницы
CSS учебник: CSS Backgrounds
HTML DOM справочник: Свойство backgroundSize
