САЙТЫ  ПОД  КЛЮЧ
ОНЛАЙН-СЕРВИСЫ СПРАВОЧНИКИ SEO-ИНСТРУМЕНТЫ РАЗВЛЕЧЕНИЯ

Справочник по CSS

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

Результат использования -moz-background-size

Рис. 1. Результат использования -moz-background-size

Браузеры

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

Справочник по CSS. Версия 7.0 от 5.11.12

© 2002–2012 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru

htmlbook.ru


Это интересно

Учёные Стэнфордского университета обнаружили сходство между принципами сбора еды у красных муравьёв-жнецов и алгоритмами протокола TCP/IP, лежащими в основе организации Интернета. Информация между двумя точками сети отправляется в виде мелких пакетов, и когда они приходят во второй пункт, в первый пункт отправляется подтверждение о получении. Если подтверждения приходят быстро, количество отправляемых пакетов из первой точки увеличивается, и наоборот. Похожий принцип наблюдается у муравьёв: чем больше из какого-либо региона возвращается сборщиков с едой, тем больше новых рабочих уходит туда из муравейника. Также у муравьёв обнаружены и другие параллели с алгоритмами TCP/IP, такими, как «медленный старт» и «тайм-аут».


Наши реквизиты
WMID: 309688839848
WMR: R325885159214
E-mail: 
  BL:Бизнес-уровень [BL]
QR-код сайта
Онлайн-радио
Больше радиостанций