background-size

Пример

Укажите размер фонового изображения с помощью "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

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

Существует четыре различных синтаксиса, которые вы можете использовать с этим приложением: синтаксис ключевых слов ("auto", "cover" и "contain"), синтаксис с одним значением (устанавливает ширину изображения (высота становится "auto"), синтаксис с двумя значениями (первое значение: ширина изображения, второе значение: высота) и синтаксис с несколькими фонами (разделяются запятой).

Показ демо ❯

Значение по умолчанию:	auto
Унаследовано:	no
Анимируемый:	yes. Читайте о animatable Попробуй
Версия:	CSS3
JavaScript синтаксис:	object.style.backgroundSize="60px 120px" Попробуй

Поддержка background-size

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

Цифры, за которыми следуют -webkit-, -moz- или -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-

Синтаксис background-size

Значения background-size

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

Примеры background-size

Пример

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

#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":

#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}

Попробуйте сами »

Пример

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

#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: contain;
}

Попробуйте сами »

Пример

Здесь у нас есть два фоновых изображения. Мы указываем размер первого фонового изображения с помощью "contain", а второго фонового изображения с помощью "cover".

#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size: contain, cover;
}

Попробуйте сами »

Пример

Используйте различные свойства фона для создания изображения "hero":

.hero-image {
background-image: url("photographer.jpg"); /* Используемое изображение */
background-color: #cccccc; /* Используется, если изображение недоступно */
height: 500px; /* Вы должны установить указанную высоту */
background-position: center; /* Центрируйте изображение */
background-repeat: no-repeat; /* Не повторяйте изображение */
background-size: cover; /* Измените размер фонового изображения, чтобы оно покрывало весь контейнер */
}

Попробуйте сами »