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

Свойство `background-size` задает размер картинки фона. Значением свойства служат любые единицы для размеров, либо ключевые слова auto, cover или contain.

## Синтаксис

`селектор { background-size: значение; }`

## Ключевые слова

Значение | Описание
--- | ---
`auto` | Фон будет иметь натуральный размер, такой, как реальный размер картинки фона. Если же `auto` задано только для одной стороны, то по этой стороне фон будет масштабироваться так, чтобы иметь неискаженные пропорции.
`cover` | Масштабирует картинку так, чтобы она накрыла собой весь блок с сохранением пропорций. Картинка будет стараться поместиться целиком, но это не всегда будет получаться, поэтому какая-то ее часть будет обрезаться. Блок всегда будет покрыт картинкой целиком.
`contain` | Масштабирует картинку так, чтобы она целиком влезла в блок с сохранением пропорций. При этом она может занять или всю ширину, или всю высоту (зависит от пропорций картинки и от размеров элемента). Блок в общем случае будет покрыт картинкой не целиком (зато картинка всегда будет видна вся, хоть и в уменьшенном варианте).

Значение по умолчанию: `auto`.

## Использование

Единицы для размеров и `auto` могут быть использованы в различных комбинациях, например, так: `auto 20px`, или `30% 20px`, или `auto 30%` и так далее. В этом случае первый параметр задает размер фона по ширине, а второй параметр - размер фона по высоте. Если указан один параметр - то он будет задавать размер фона и по ширине, и по высоте одновременно.

## Пример

Сейчас фоновая картинка будет иметь свой натуральный размер:

`<div id="elem"></div>` `#elem { background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; width: 550px; height: 400px; }`

:

## Пример

Сейчас фоновая картинка будет размер `300px` на `400px` (в нашем случае пропорции картинки исказятся):

`<div id="elem"></div>` `#elem { background-size: 300px 400px; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; width: 400px; height: 400px; }`

:

## Пример

Сейчас фоновая картинка будет размер `400px` на `400px` (в нашем случае пропорции картинки исказятся):

`<div id="elem"></div>` `#elem { background-size: 400px; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; width: 400px; height: 400px; }`

:

## Пример

Сейчас фоновая картинка будет размер `400px` по горизонтали, а по вертикали ее размер подстроится так, чтобы пропорции не исказились:

`<div id="elem"></div>` `#elem { background-size: 400px auto; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; width: 400px; height: 400px; }`

:

## Пример

Сейчас фоновая картинка будет размер `400px` по вертикали, а по горизонтали ее размер подстроится так, чтобы пропорции не исказились:

`<div id="elem"></div>` `#elem { background-size: auto 400px; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; width: 400px; height: 400px; }`

:

## Пример . Значение contain

Посмотрите на работу значения `contain`:

`<div id="elem1" class="elem"></div> <div id="elem2" class="elem"></div> <div id="elem3" class="elem"></div> <div id="elem4" class="elem"></div> <div id="elem5" class="elem"></div> <div id="elem6" class="elem"></div>` `.elem { background-size: contain; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; margin-bottom: 20px; } #elem1 { width: 600px; height: 500px; } #elem2 { width: 500px; height: 600px; } #elem3 { width: 400px; height: 400px; } #elem4 { width: 300px; height: 400px; } #elem5 { width: 200px; height: 400px; } #elem6 { width: 300px; height: 100px; }`

:

## Пример . Значение cover

Посмотрите на работу значения `cover`:

`<div id="elem1" class="elem"></div> <div id="elem2" class="elem"></div> <div id="elem3" class="elem"></div> <div id="elem4" class="elem"></div> <div id="elem5" class="elem"></div> <div id="elem6" class="elem"></div>` `.elem { background-size: cover; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; margin-bottom: 20px; } #elem1 { width: 600px; height: 500px; } #elem2 { width: 500px; height: 600px; } #elem3 { width: 400px; height: 400px; } #elem4 { width: 300px; height: 400px; } #elem5 { width: 200px; height: 400px; } #elem6 { width: 300px; height: 100px; }`

:

## Пример . Улучшим работу cover

Работу значения `cover` можно улучшить, если отцентрировать картинку с помощью свойства `background-position` (в нашем случае на видимые части начнут попадать головы лошадей, а не их задницы):

`<div id="elem1" class="elem"></div> <div id="elem2" class="elem"></div> <div id="elem3" class="elem"></div> <div id="elem4" class="elem"></div> <div id="elem5" class="elem"></div> <div id="elem6" class="elem"></div>` `.elem { background-position: center; background-size: cover; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; margin-bottom: 20px; } #elem1 { width: 600px; height: 500px; } #elem2 { width: 500px; height: 600px; } #elem3 { width: 400px; height: 400px; } #elem4 { width: 300px; height: 400px; } #elem5 { width: 200px; height: 400px; } #elem6 { width: 300px; height: 100px; }`

:

## Смотрите также

- свойство `background`,
  представляющее собой свойство-сокращение для фона

←→
↑