Background по размеру div

Пример

Укажите размер фонового изображения с "Auto" и в пикселях:

#example1 <
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
>

#example2 <
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 300px 100px;
>

Подробнее примеры ниже.

Определение и использование

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

С этим свойством можно использовать четыре различных синтаксиса: синтаксис ключевого слова («Auto», «Cover» и «содержит»), синтаксис с одним значением (устанавливает ширину изображения (высота становится «авто»), синтаксис с двумя значениями (первое значение: ширина изображения, второе значение: Height) и синтаксис нескольких фонов (разделенных запятой).

Значение по умолчанию:	auto
Inherited:	no
Animatable:	yes. Читайте о animatable
Version:	CSS3
Синтаксис JavaScript:	object.style.backgroundSize="60px 120px"

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Номера следуют -webkit-, -moz-, or -o- Укажет первую версию, которая работала с префиксом.

Свойство
background-size	4.0 1.0 -webkit-	9.0	4.0 3.6 -moz-	4.1 3.0 -webkit-	10.5 10.0 -o-

Синтаксис CSS

Значения свойств

Значение	Описание
auto	Значение по умолчанию. Фоновое изображение отображается в исходном размере
length	Задает ширину и высоту фонового изображения. Первое значение задает ширину, второе значение задает высоту. Если задано только одно значение, то второй параметр имеет значение "Auto". Читать о единицах длины
percentage	Задает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение задает ширину, второе значение задает высоту. Если задано только одно значение, то второе устанавливается в "Auto"
cover	Измените размер фонового изображения, чтобы охватить весь контейнер, даже если он должен растянуть изображение или вырезать немного от одного из краев
contain	Измените размер фонового изображения, чтобы убедиться, что изображение полностью отображается
initial	Присваивает этому свойству значение по умолчанию. Читайте о initial
inherit	Наследует это свойство из родительского элемента. Читайте о inherit

Другие примеры

Пример

Укажите размер фонового изображения с процентами:

#example1 <
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
>

#example2 <
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 75% 50%;
>

Пример

Укажите размер фонового изображения с помощью "Cover":

Пример

Укажите размер фонового изображения с "содержать":

Пример

Здесь у нас есть два фоновых изображения. Мы указываем размер первого фонового изображения с "содержать", а второй фон-изображение с "Cover":

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

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Масштабирует фоновое изображение согласно заданным размерам.

Синтаксис

background-size: [ | | auto ] <1,2>| cover | contain

Значения

Если установлено одно значение, оно задает ширину фона, второе значение принимается за auto . Пропорции картинки при этом сохраняются. Использование двух значений через пробел задает ширину и высоту фоновой картинки.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Браузеры

Safari до версии 4.1 и Chrome до версии 3.0 используют нестандартное свойство -webkit-background-size .

Opera до версии 10.53 использует нестандартное свойство -o-background-size .

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

Опции темы

Отображение

• Линейный вид
• Комбинированный вид
• Древовидный вид

Как растянуть бэкграунд по размерам div’а?

Помогите советом, как растянуть фоновый рисунок, если он меньше самого объекта(div’а), так чтоб он маштабировался под размер объекта.

фоновые рисунки, указанные как background-image не растягиваются
чтобы добится эффекта заливки, используют повторяющийся фон, который делает эффект полной картинки

если это не подходит, то можно попробовать использовать слои, когда один слой, это ваша картинка, а второй поверх первого — это ваши данные