Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 9.5+ | 3.0+ | 3.6+ | 2.1+ | 1.0+ |
Значение по умолчанию | auto |
---|---|
Наследуется | Нет |
Применяется | Ко всем элементам |
Ссылка на спецификацию | http://www.w3.org/TR/css3-background/#the-background-size |
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Масштабирует фоновое изображение согласно заданным размерам.
background-size: [ <значение> | <проценты> | auto ]{1,2} | cover | contain
Если установлено одно значение, оно задает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задает ширину и высоту фоновой картинки.
Пример
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background-size</title> <style> div { height: 200px; /* Высота блока */ border: 2px solid #000; /* Параметры рамки */ background: url(images/mybg.png) 100% 100% no-repeat; /* Добавляем фон */ background-size: cover; /* Масштабируем фон */ } </style> </head> <body> <div>...</div> </body> </html>
Safari до версии 4.1 и Chrome до версии 3.0 используют нестандартное свойство -webkit-background-size.
Opera до версии 10.53 использует нестандартное свойство -o-background-size.
Firefox до версии 4.0 использует нестандартное свойство -moz-background-size.
Сайт