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

Рис. 1. Результат использования -moz-background-size
Браузеры
Начиная с версии 4.0 Firefox использует стандартное свойство background-size.