W3docs
ru
Войти

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

The background-size is a CSS property which sets the size of the background-image. Read about the values and try examples for yourself.

Свойство 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
Синтаксис DOMobject.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("/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>
Попробуйте сами »

Результат

CSS background-size Property

В приведенном выше примере применяется значение length. Оно задает ширину и высоту фонового изображения. Первое значение задает ширину, а второе — высоту. Если указано только одно значение, второе устанавливается в auto.

Посмотрите еще один пример, где ширина и высота фонового изображения задаются в процентах.

Пример свойства background-size со значением "%":

Пример свойства CSS background-size со значением % (проценты)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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 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("/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("/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("/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("/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'?