Свойство background-size CSS
- Предыдущая страница background-repeat
- Следующая страница block-size
Определение и использование
background-size Атрибут определяет размер фонового изображения.
См. также:
Урок CSS:Фон CSS,CSS фоновое изображение (расширенное)
Руководство по HTML DOM:Атрибут backgroundSize
Пример
Определяет размер фонового изображения:
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
CSS синтаксис
background-size: length|percentage|cover|contain;
Значение атрибута
| Значение | Описание | Тестирование |
|---|---|---|
| length |
Устанавливает высоту и ширину фонового изображения. Первое значение устанавливает ширину, второе значение устанавливает высоту. Если установлено только одно значение, то второе значение будет установлено в "auto". |
Тестирование |
| percentage |
Устанавливает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение устанавливает ширину, второе значение устанавливает высоту. Если установлено только одно значение, то второе значение будет установлено в "auto". |
Тестирование |
| cover |
Расширите фоновое изображение до достаточного размера, чтобы фоновое изображение полностью покрыло область фона. Некоторые части фонового изображения могут не отображаться в области фонового позиционирования. |
Тестирование |
| contain | Расширите изображение до максимального размера, чтобы его ширина и высота полностью соответствовали области содержимого. | Тестирование |
Технические детали
| Значение по умолчанию: | auto |
|---|---|
| Инheritability: | нет |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.backgroundSize="60px 80px" |
Более примеров
- Растяните фоновое изображение
- Растяните фоновое изображение, чтобы полностью покрыть область содержимого.
- Растяните фоновое изображение, чтобы горизонтально скопировать фоновое изображение四次
- Растяните фоновое изображение, чтобы фоновое изображение было точно горизонтально скопировано四次.
Поддержка браузерами
Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | IE / Edge | Firefox | Safari | Opera |
| 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
- Предыдущая страница background-repeat
- Следующая страница block-size
