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

css-свойство background-size (от англ. background size – размер фона) задает размеры и управляет масштабированием фонового изображения элемента.

Характеристики

Значение по умолчанию: auto.
Применяется: ко всем элементам.
Наследуется: нет.
Анимируется: да.
JavaScript: object.style.backgroundSize="value".

Синтаксис

background-size: <размер фона>[, <размер фона>]*, где

<размер фона> = <размер> | <проценты> | auto ]{1,2} | cover | contain.

Значения

auto – не изменяет исходный размер изображения, используется браузером по умолчанию.
размеры – пара значений, указываемых через пробел, определяют ширину и высоту фонового изображения в любых доступных в CSS единицах измерения (смотреть). Если будет указано только одно значение, т.е. ширина, то высоту браузер рассчитает автоматически с сохранением пропорций изображения.
% – пара значений, но указанных в процентах; первое значение определяет ширину фонового изображения относительно ширины элемента, а второе определяет его высоту относительно высоты элемента. Если будет указано только одно значение, браузер будет рассчитывать размеры относительно ширины элемента.
cover – изображение будет масштабировано с сохранением пропорций под размеры элемента, при этом часть изображения может быть обрезано в зависимости от размеров ширины и высоты как фонового изображения, так и самого элемента.
contain – изображение будет масштабировано с сохранением пропорций таким образом, чтобы полностью поместиться внутри элемента, при этом изображение нигде не обрезается, но необязательно покрывает всю необходимую фоновую область элемента.

Разрешается указывать через запятую несколько параметров в случае использования более одного фонового изображения.

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/css-backgrounds-3/#the-background-size

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/background-size

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
	
	<style>
		p{
		padding: 3em;
		width: 400px;
		min-height: 40px;
		border: dashed green 12px;
		background-color: yellow;
		background-repeat: no-repeat;
		background-image: url("images/balls_2015.jpg");
		}
		
		.background_1{background-size: cover;}
		.background_2{background-size: contain}
		.background_3{background-size: 20%;}
	</style>
</head>
<body>
	<p class="background_1">
		cover - высота изображения больше его ширины, поэтому<br> 
		по ширине изображение приняло ширину элемента, а по<br> 
		высоте было обрезано по высоте элемента.
	</p>
	
	<p class="background_2">
		contain - фоновое изображение полностью поместилось в<br> 
		пределах элемента, но часть площади элемента не была<br> 
		покрыта фоновым изображением.
	</p>
	
	<p class="background_3">
		20% - ширина и высота фонового изображения равны<br> 
		20% от ширины элемента. 
	</p>
</body>
</html>

Пример №1