CSS свойство background-size
Определение и применение
CSS свойство background-size определяет размер фонового изображения/-ий. Область, относительно которой
рассчитывается размер фонового изображения, определяется свойством
background-origin.
Настройка фона рассмотрена в уроке «Работа с фоном элемента в CSS».
Размер плитки фонового узора можно настроить в генераторе градиентов.
Попробуйте значения background-size
Исходная картинка — SVG размером 160 × 80. cover заполняет область с обрезкой, contain сохраняет всю картинку; явные размеры могут менять пропорции.
background-size: 64px 64px
HTML и CSS примера
<div class="demo-target" aria-label="Область фона"></div>
.demo-target {
box-sizing: border-box;
width: 100%;
max-width: 320px;
min-height: 180px;
padding: 24px;
border: 3px solid #245a85;
border-radius: 8px;
color: #172c3d;
background-color: #d9edf8;
font: 18px/1.5 system-ui;
height: 210px;
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%2280%22 viewBox=%220 0 160 80%22%3E%3Cpath fill=%22%23245a85%22 d=%22M0 0h160v80H0z%22/%3E%3Ccircle cx=%2280%22 cy=%2240%22 r=%2230%22 fill=%22%23ffcb69%22/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 64px 64px;
}
.demo-target {
box-sizing: border-box;
width: 100%;
max-width: 320px;
min-height: 180px;
padding: 24px;
border: 3px solid #245a85;
border-radius: 8px;
color: #172c3d;
background-color: #d9edf8;
font: 18px/1.5 system-ui;
height: 210px;
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%2280%22 viewBox=%220 0 160 80%22%3E%3Cpath fill=%22%23245a85%22 d=%22M0 0h160v80H0z%22/%3E%3Ccircle cx=%2280%22 cy=%2240%22 r=%2230%22 fill=%22%23ffcb69%22/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 50% 50%;
}
.demo-target {
box-sizing: border-box;
width: 100%;
max-width: 320px;
min-height: 180px;
padding: 24px;
border: 3px solid #245a85;
border-radius: 8px;
color: #172c3d;
background-color: #d9edf8;
font: 18px/1.5 system-ui;
height: 210px;
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%2280%22 viewBox=%220 0 160 80%22%3E%3Cpath fill=%22%23245a85%22 d=%22M0 0h160v80H0z%22/%3E%3Ccircle cx=%2280%22 cy=%2240%22 r=%2230%22 fill=%22%23ffcb69%22/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
}
.demo-target {
box-sizing: border-box;
width: 100%;
max-width: 320px;
min-height: 180px;
padding: 24px;
border: 3px solid #245a85;
border-radius: 8px;
color: #172c3d;
background-color: #d9edf8;
font: 18px/1.5 system-ui;
height: 210px;
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%2280%22 viewBox=%220 0 160 80%22%3E%3Cpath fill=%22%23245a85%22 d=%22M0 0h160v80H0z%22/%3E%3Ccircle cx=%2280%22 cy=%2240%22 r=%2230%22 fill=%22%23ffcb69%22/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.demo-target {
box-sizing: border-box;
width: 100%;
max-width: 320px;
min-height: 180px;
padding: 24px;
border: 3px solid #245a85;
border-radius: 8px;
color: #172c3d;
background-color: #d9edf8;
font: 18px/1.5 system-ui;
height: 210px;
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%2280%22 viewBox=%220 0 160 80%22%3E%3Cpath fill=%22%23245a85%22 d=%22M0 0h160v80H0z%22/%3E%3Ccircle cx=%2280%22 cy=%2240%22 r=%2230%22 fill=%22%23ffcb69%22/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
Поддержка браузерами
Спецификация: CSS backgrounds
Поддерживается во всех основных браузерах с 2015 года.
| Возможность | Компьютеры | Мобильные | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
 Chrome |  Edge |  Firefox |  Opera |  Safari | Chrome Android | Firefox for Android | Opera Android |  Safari on iOS |  Samsung Browser |  WebView Android | WebView on iOS | |
background-size | 3 Версия 3 выпущена в 2009 г. Версия 1 выпущена в 2008 г. — Префикс -webkit- Примечание MDN (англ.) WebKit-based browsers originally implemented an older draft of CSS3 | 12 Версия 12 выпущена в 2015 г. Версия 12 выпущена в 2015 г. — Префикс -webkit- | 4 Версия 4 выпущена в 2011 г. Версия 49 выпущена в 2016 г. — Префикс -webkit- Версия 3.6 выпущена в 2010 г. — Удалено в 4; Префикс -moz- | 10 Версия 10 выпущена в 2009 г. Версия 15 выпущена в 2013 г. — Префикс -webkit- Примечание MDN (англ.) WebKit-based browsers originally implemented an older draft of CSS3 Версия 9.5 выпущена в 2008 г. — Удалено в 15; Префикс -o- Примечание MDN (англ.) Opera 9.5's computation of the background positioning area is incorrect for fixed backgrounds. Opera 9.5 also interprets the two-value form as a horizontal scaling factor and, from appearances, a vertical clipping dimension. This has been fixed in Opera 10. | 5 Версия 5 выпущена в 2010 г. Версия 3 выпущена в 2007 г. — Префикс -webkit- Примечание MDN (англ.) WebKit-based browsers originally implemented an older draft of CSS3 | 18 Версия 18 выпущена в 2012 г. Версия 18 выпущена в 2012 г. — Префикс -webkit- Примечание MDN (англ.) WebKit-based browsers originally implemented an older draft of CSS3 | 4 Версия 4 выпущена в 2011 г. Версия 49 выпущена в 2016 г. — Префикс -webkit- | 10.1 Версия 10.1 выпущена в 2010 г. Версия 14 выпущена в 2013 г. — Префикс -webkit- Примечание MDN (англ.) WebKit-based browsers originally implemented an older draft of CSS3 Версия 10.1 выпущена в 2010 г. — Удалено в 14; Префикс -o- Примечание MDN (англ.) Opera 9.5's computation of the background positioning area is incorrect for fixed backgrounds. Opera 9.5 also interprets the two-value form as a horizontal scaling factor and, from appearances, a vertical clipping dimension. This has been fixed in Opera 10. | 4.2 Версия 4.2 выпущена в 2010 г. Версия 1 выпущена в 2007 г. — Префикс -webkit- Примечание MDN (англ.) WebKit-based browsers originally implemented an older draft of CSS3 | 1.0 Версия 1.0 выпущена в 2013 г. Версия 1.0 выпущена в 2013 г. — Префикс -webkit- Примечание MDN (англ.) WebKit-based browsers originally implemented an older draft of CSS3 | 4.4 Версия 4.4 выпущена в 2013 г. Версия 4.4 выпущена в 2013 г. — Префикс -webkit- Примечание MDN (англ.) WebKit-based browsers originally implemented an older draft of CSS3 | 4.2 Версия 4.2 выпущена в 2010 г. Версия 1 выпущена в 2007 г. — Префикс -webkit- Примечание MDN (англ.) WebKit-based browsers originally implemented an older draft of CSS3 |
auto | 1 | 12 | 3.6 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
contain | 3 | 12 | 3.6 | 10 | 5 | 18 | 4 | 14 | 4.2 | 1.0 | 37 | 4.2 |
cover | 3 | 12 | 3.6 | 10 | 5 | 18 | 4 | 14 | 4.2 | 1.0 | 37 | 4.2 |
поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31
CSS синтаксис:
background-size: [ cover | contain | [ auto | <length-percentage [0,∞]> ]{1,2} ]#;
/* Глобальные значения */
background-size: initial | inherit | unset | revert | revert-layer;
| разделяет варианты. # — одно или несколько значений через запятую для фоновых слоёв.
Квадратные скобки группируют части записи. {1,2} — одно или два значения.
<length-percentage [0,∞]> — неотрицательная длина или процент.
JavaScript синтаксис:
element.style.backgroundSize = "150px 150px";Начальное значение свойства
auto.
Значения свойства
| Значение | Описание |
|---|---|
auto |
Используются собственные размеры и пропорции изображения. При одной заданной стороне вторая вычисляется с сохранением пропорций; изображение без собственных размеров и пропорций, например градиент, занимает область позиционирования. Начальное значение. |
<length> |
Устанавливает ширину и высоту фонового изображения. Первое значение устанавливает ширину, второе значение задает
высоту. Если указано только одно значение, то для второго устанавливается значение auto.
|
<percentage> |
Устанавливает ширину и высоту фонового изображения в процентах от области позиционирования фона самого элемента,
заданной background-origin (для fixed — от окна просмотра). Первое значение
устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго
устанавливается значение auto.
|
cover |
Сохраняя пропорции, масштабирует изображение так, чтобы оно полностью покрывало область позиционирования. Некоторые части фонового изображения могут быть скрыты из поля зрения. |
contain |
Сохраняя пропорции, масштабирует изображение, чтобы оно целиком поместилось в области позиционирования. При
no-repeat незанятое место остаётся свободным; повторение настраивается отдельно.
|
initial
|
Устанавливает начальное значение свойства. |
inherit
|
Наследует вычисленное значение свойства у родительского элемента. |
unset |
Для ненаследуемого свойства background-size устанавливает его
начальное значение.
|
revert |
Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS. |
revert-layer |
Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя
по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.
|
Для нескольких фоновых изображений значения перечисляют через запятую в порядке background-image: первый
слой находится сверху. Короткий список повторяется до числа изображений, лишние значения не используются.
Спецификация
CSS Backgrounds and Borders Module Level 3.
Наследуется
Нет.
Анимируемое
Да, как повторяемый список размеров: совместимые длины и проценты интерполируются плавно. Переходы между
auto, cover, contain и числовыми размерами дискретные.
Примеры, попробуйте сами
cover и contain
Рисунок имеет пропорции 8:5: круг помогает заметить искажение, рамка — обрезку. При других пропорциях блока способы масштабирования дают разный результат. Сравните cover и contain: первый вариант заполняет блок с обрезкой, второй показывает весь рисунок. Попробуйте 100% 100% — при несовпадении пропорций круг станет овалом.
base.css
* {
box-sizing: border-box;
}
body {
margin: 16px;
font:
16px/1.4 system-ui,
sans-serif;
color: #172c3d;
}
.comparison {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
gap: 16px;
}
h3 {
font-size: 16px;
margin: 0 0 8px;
}
section {
min-width: 0;
background: repeating-conic-gradient(#fff 0% 25%, #e1e7ed 0% 50%) 0 / 20px 20px;
}
.sample {
width: min(100%, 220px);
aspect-ratio: 1;
border: 1px solid #607589;
}
index.html
<div class="comparison">
<section>
<h3>Вариант A</h3>
<div class="sample"></div>
</section>
<section>
<h3>Вариант B</h3>
<div class="sample second"></div>
</section>
</div>
style.css
.sample {
background-image: url('assets/proportions.svg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.second {
background-size: contain;
}