Справочник по CSS : Тематический указатель : Расширения CSS для Firefox (Gecko) : Свойства : -moz-background-size
смотрим также
Материал из Справочник Web-языков
Содержание |
Свойство -moz-background-size
Задает размер фонового изображения.
Синтаксис
-moz-background-size: <bg-size> [, <bg-size>]*
Используемые значения
- <bg-size>
- Может принимать одно из следующих значений:
- percentage
- Размер фонового изображения задается в процентах от области, определенной для фонового изображения с помощью свойства -moz-background-origin.
- auto
- Автоматический выбор пропорций изображения. Размер изображения задается с помощью двух параметров: первое значение отвечает за горизонтальный размер, второе - за вертикальный. Если задано значение только для одного из параметров (для ширины или высоты), то второе высчитывается автоматически.
- contain
- Задает, что фоновое изображение должно быть максимально большим, но так, чтобы размеры изображения гарантированно были меньше или равны заданным значениям для области позиционирования фонового изображения.
- cover
- Задает, что фоновое изображение должно быть наименьшим, но так, чтобы размеры изображения гарантированно были больше или равны заданным значениям для области позиционирования фонового изображения.
Значением по умолчанию является auto. Атрибут Каскадных таблиц стилей (CSS) не наследуется.
Замечания
Свойство -moz-background-size является новым и требует для работы Gecko 1.9.2 (Firefox 3.6). Но чтобы растянуть фоновое изображение над всей областью, определенной для фона, можно воспользоваться свойством -moz-border-image, которое работает и в Firefox 3.5.
.foo { background-image: url(bg-image.png); -moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */ -o-background-size: 100% 100%; /* Opera 9.5 */ -webkit-background-size: 100% 100%; /* Safari 3.0 */ -khtml-background-size: 100% 100%; /* Konqueror 3.5.4 */ -moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */ }
Примеры
На страницах демонстрация работы свойства background-size: cover и демонстрация работы свойства background-size: contain вы можете увидеть как работает свойство -moz-background-size при значениях cover и content.
На странице демонстрация работы свойства background-size вы можете увидеть как свойство -moz-background-size работает в сочетании с остальными свойствами для фона.
Для просмотра примеров используйте браузер Gecko 1.9.2 (Firefox 3.6).
Стандарты
Это свойство определено в CSS 3 Backgrounds and borders #background-size
Поддерживаемые браузеры
Firefox (Gecko) начиная с версии 3.6 (1.9.2) - для -moz-background-size.
Opera начиная с версии 9.5 - для -o-background-size.
Safari (WebKit) начиная с версии 3.0 (522) - для -webkit-background-size.
Konqueror 3.5.4 поддерживает -khtml-background-size..
Смотрите также
-moz-background-origin, -moz-background-clip, background, background-attachment, background-color, background-image, background-position, background-repeat