CSS свойство background-size

Свойство 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 Значение элемента наследуется от родительского элемента.




Related articles