Свойство background-size устанавливает размер фонового изображения.
Данное свойство имеет пять значений: auto, length, percentages, cover, contain.
Auto устанавливает фоновое изображение в его оригинальном размере. Является значением по умолчанию. Length устанавливает высоту и толщину свойства background image. Отрицательные значения недопустимы. Percentage устанавливает высоту и толщину свойства background-image в процентах. Отрицательные значения недопустимы.
Cover масштабирует изображение без растягивания. Если пропорции изображения различаются от элемента, изображение будет срезано по вертикали или по горизонтали таким образом, чтобы не осталось свободного места.
Contain масштабирует фоновое изображение таким образом, чтобы изображение полностью поместилось внутрь блока.
| Значение по умолчанию | auto |
| Применяется | Ко всем элементам, а также к ::first-letter и ::first-line. |
| Наследуется | Нет |
| Анимируемое | Да. Размер фонового изображения анимируем. |
| Версия | CSS3 |
| DOM синтаксис | object.style.backgroundSize = "50% 100%"; |
Синтаксис
background-size: auto | length | cover | contain | initial | inherit;Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
body {
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: 300px 200px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Пример background size.</h2>
<p>Здесь может быть любая информация.</p>
</body>
</html>В этом примере применено значение length. Оно устанавливает толщину и высоту фонового изображения. Первое значение устанавливает толщину, а второе - высоту. При наличии только одного значения, второе значение будет установлено на "auto".
Пример, где толщина и высота фонового изображения установлены в процентах:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
body {
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: 40% 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Пример background size.</h2>
<p>Здесь может быть любая информация.</p>
</body>
</html>Пример со значением cover. Оно масштабирует изображение без растягивания:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
body {
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Пример background size.</h2>
<p>Здесь может быть любая информация.</p>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| auto | Это значение по умолчанию. Устанавливает background-image в оригинальном размере. |
| length | Устанавливает толщину и высоту фонового изображения. Первое значение устанавливает толщину, а второе - высоту. При одном значении, второе значение устанавливается на auto. Обозначается в “px”, “em”. |
| percentage | Устанавливает толщину и высоту в процентах. Первое значение устанавливает толщину, а второе - высоту. При одном значении, второе значение устанавливается на auto. |
| cover | Увеличивает изображение таким образом, чтобы полностью покрыть фоновую часть. |
| contain | Фоновое изображение масштабируется так, чтобы полностью заполнить пространство элемента, при этом сохраняя свои пропорции. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
|
|
|
|
|---|---|---|---|
| 15.0+ |
4.0+ 3.6 -moz- |
7.0+ |
11.5+ 10.1 -o- |
Практикуйте свои знания
