Свойство background-size задает размер картинки фона.

Данное свойство входит в свойство-сокращение background.

См. все свойства для фона: background-attachment, background-color, background-image, background-position, background-repeat, background-size, background-origin, background-clip, background.

См. также тег img, с помощью которого можно сделать картинку в HTML коде.

Синтаксис

CSS 2.1

селектор {
	background-size: CSS единицы | проценты | auto | cover | contain;
}

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

CSS 3

В CSS3 можно задавать размер нескольких картинок фона одновременно, перечисляя их через запятую.

Значения

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

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

Видео

Посмотрите данное видео, чтобы погрузиться в работу со свойством background-size:

Примеры

Пример . Значение auto для обоих сторон

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

body {
	background: url("bg.jpg") no-repeat;
	background-size: auto;
}

Посмотреть пример.

Пример . Значения в процентах

В данном примере фоновая картинка занимает 50% ширины и 30% высоты окна браузера (при этом картинка будет иметь искаженные пропорции):

body {
	background: url("bg.jpg") no-repeat;
	background-size: 50% 30%;
}

Посмотреть пример.

Пример . Значения в пикселях и процентах

В данном примере фоновая картинка занимает 50% ширины окна браузера и 400px по высоте (при этом картинка будет иметь искаженные пропорции):

body {
	background: url("bg.jpg") no-repeat;
	background-size: 50% 400px;
}

Посмотреть пример.

Пример . Значение auto для одной из сторон + проценты

В данном примере фоновая картинка занимает 50% ширины окна браузера, а по высоте подстроится так, чтобы сохранить пропорции (поуменьшайте окно браузера, чтобы убедиться, что этой действительно так - картинка будут оставаться неискаженной):

body {
	background: url("bg.jpg") no-repeat;
	background-size: 50% auto;
}

Посмотреть пример.

Пример . Значение auto для одной из сторон + пиксели

В данном примере фоновая картинка занимает 300px по высоте, а по ширине подстроится так, чтобы сохранить пропорции:

body {
	background: url("bg.jpg") no-repeat;
	background-size: auto 300px;
}

Посмотреть пример.

Пример . Значение 100% для обеих сторон

Сейчас картинка будет всегда на весь экран с искаженными пропорциями (так как и по ширине и по высоте мы берем 100%, можно было просто написать background-size: 100% - одно значение):

body {
	background: url("bg.jpg") no-repeat;
	background-size: 100% 100%;
}

Посмотреть пример.

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

Сейчас картинка будет занимать всю ширину или всю высоту с сохранением пропорций. Поуменьшайте окно браузера, чтобы увидеть, что картинка в различных состояниях будет занимать или всю ширину или всю высоту:

body {
	background: url("bg.jpg") no-repeat;
	background-size: contain;
}

Посмотреть пример.

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

Сейчас картинка будет целиком накрывать собой в блок с сохранением пропорций: Картинка будет стараться поместиться целиком, но это не всегда будет получаться, поэтому какая-то ее часть будет обрезаться:

body {
	background: url("bg.jpg") no-repeat;
	background-size: cover;
}

Посмотреть пример.

Сравните с тем, как будет выглядеть картинка по умолчанию (при значении auto). Поуменьшайте окно браузера, чтобы увидеть отличия:

Посмотреть пример.