Последнее обновление: 22.12.2010
Свойство background-size определяет ширину и высоту фонового изображения.
Если задана только одна величина, другая по умолчанию будет иметь значение auto.
Допустимые значения
- — ширина и высота фонового изображения в прямом виде
- — ширина и высота фонового изображения в процентном отношении от ширины и высоты элемента.
- contain — изображение масштабируется, сохраняя при этом пропорции, по большей стороне так, чтобы и ширина и высота поместились внутри области фонового изображения.
- cover — изображение масштабируется, сохраняя при этом пропорции, по меньшей стороне так, чтобы и ширина и высота полностью покрыли область фонового изображения.
- auto — изображение имеет свой собственный размер (масштаб 100%), а если нет то масштабируется, как будто задано значение contain.
 |
| фоновое изображение в натуральную величину |
 |
 |
 |
| background-size:auto (фоновое изображение не масштабируется) | background-size:contain | background-size:cover |
| Значение по умолчанию | auto |
|---|---|
| Применимо | ко всем элементам |
| Наследование | нет |
| Версия CSS | CSS 3 |
| Поддерживается браузерами |
|
Пример
.block {
background-image: url(images/bg.png);
background-size: 50% 60px;
background-color: #f00;
}
Заметки
Это свойство относится к CSS3 модулю CSS Backgrounds and Borders Module Level 3 — кандидата в рекомендацию W3C с 17 декабря 2009 года.
Safari 3+ и Chrome 1+ поддерживают аналогичное свойство -webkit-background-size, Firefox 3.6 -moz-background-size, а Opera 9.6+(до 10.53) -o-background-size. Эти свойства имеют некоторые отличия от background-size, самое большое из них то, что -webkit-background-size и -o-background-size не поддерживают значений contain и cover.