Свойство CSS background-size
Свойство background-size используется для определения размера фонового изображения.
Свойство background-size является одним из свойств CSS3.
Это свойство имеет пять значений: auto, length, percentage, cover, contain.
auto устанавливает фоновое изображение в его исходном размере. Это значение по умолчанию. length указывает высоту и ширину фонового изображения. Отрицательные значения недопустимы. percentage устанавливает высоту и ширину фонового изображения в процентах. Отрицательные значения также недопустимы.
cover масштабирует изображение максимально возможного размера без его растяжения. Если пропорции изображения отличаются от пропорций элемента, оно обрезается по вертикали или горизонтали так, чтобы не оставалось пустого пространства.
contain изменяет размер фонового изображения так, чтобы оно было полностью видно.
Существуют изображения, такие как JPEG, которые имеют собственные размеры и пропорции, и изображения, такие как градиенты, у которых нет собственных размеров и пропорций. Если не указано иное, вторые всегда занимают размер фоновой области элемента.
Свойство background-size также принимает значения, разделенные запятыми, и когда у элемента есть несколько фоновых изображений, каждое значение применяется к соответствующему фоновому изображению. Например, первое значение применяется к первому background-image, второе значение — ко второму изображению и т. д.
| Начальное значение | auto |
|---|---|
| Применяется к | Ко всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Нет. |
| Анимируется | Да. Размер фонового изображения анимируется. |
| Версия | CSS3 |
| Синтаксис DOM | object.style.backgroundSize = "50% 100%"; |
Синтаксис
Синтаксис свойства CSS background-size
background-size: auto | length | percentage | cover | contain | initial | inherit;Свойство background-size часто используется со сокращенной записью background, например:
background: url("image.jpg") no-repeat center / cover;Пример использования свойства background-size:
Пример свойства CSS background-size со значением в пикселях (px)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: 300px 200px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Результат
В приведенном выше примере применяется значение length. Оно задает ширину и высоту фонового изображения. Первое значение задает ширину, а второе — высоту. Если указано только одно значение, второе устанавливается в auto.
Посмотрите еще один пример, где ширина и высота фонового изображения задаются в процентах.
Пример свойства background-size со значением "%":
Пример свойства CSS background-size со значением % (проценты)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: 40% 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Значение cover делает изображение максимально большим без его растяжения.
Пример свойства background-size со значением "cover":
Пример свойства CSS background-size со значением cover
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Пример свойства background-size со значением "contain":
Пример свойства CSS background-size со значением "contain":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: contain;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Пример свойства background-size со значением "auto":
Пример свойства CSS background-size со значением "auto":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: auto;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Пример свойства background-size со значением "length":
Пример свойства background-size со значением "length":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 260px;
height: 190px;
background: url("https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg") no-repeat;
background-size: 260px;
}
</style>
</head>
<body>
<h1>CSS background-size property </h1>
<p>Example of the background-size property with a length value.</p>
<div></div>
</body>
</html>Значения
| Значение | Описание | Запустить |
|---|---|---|
| auto | Значение по умолчанию. Устанавливает фоновое изображение в его исходном размере. | Запустить » |
| length | Задает ширину и высоту фонового изображения. Первое значение задает ширину, а второе — высоту. Если указано только одно значение, второе устанавливается в auto. Указывается в «px», «em». | Запустить » |
| percentage | Задает ширину и высоту в процентах. Первое значение задает ширину, а второе — высоту. Если указано только одно значение, второе устанавливается в auto. | Запустить » |
| cover | Масштабирует фоновое изображение максимально возможного размера, чтобы покрыть всю фоновую область. | Запустить » |
| contain | Масштабирует фоновое изображение до максимального размера, при котором его ширина и высота помещаются внутри фоновой области. | Запустить » |
| initial | Устанавливает свойству значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Практика
В CSS какие возможные значения может принимать свойство 'background-size'?