Свойство background-size

Последнее обновление: 22.12.2010

Свойство background-size определяет ширину и высоту фонового изображения.

Если задана только одна величина, другая по умолчанию будет иметь значение auto.

Допустимые значения

  • <величина> — ширина и высота фонового изображения в прямом виде
  • <процент> — ширина и высота фонового изображения в процентном отношении от ширины и высоты элемента.
  • contain — изображение масштабируется, сохраняя при этом пропорции, по большей стороне так, чтобы и ширина и высота поместились внутри области фонового изображения.
  • cover — изображение масштабируется, сохраняя при этом пропорции, по меньшей стороне так, чтобы и ширина и высота полностью покрыли область фонового изображения.
  • auto — изображение имеет свой собственный размер (масштаб 100%), а если нет то масштабируется, как будто задано значение contain.
фоновое изображение в натуральную величину
фоновое изображение в натуральную величину
фоновое изображение не масштабируется фоновое изображение не масштабируется фоновое изображение не масштабируется
background-size:auto (фоновое изображение не масштабируется) background-size:contain background-size:cover
Значение по умолчанию auto
Применимо ко всем элементам
Наследование нет
Версия CSS CSS 3
Поддерживается браузерами
  • Internet Explorer 9 и выше
  • Firefox 4 и выше
  • Opera 10.5 и выше
  • Safari 5 и выше
  • Chrome 4 и выше

Пример

.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.

По теме

Показать комментарии