html.okpython.net
HTML и CSS для начинающих

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 – изображение будет масштабировано с сохранением пропорций таким образом, чтобы полностью поместиться внутри элемента, при этом изображение нигде не обрезается, но необязательно покрывает всю необходимую фоновую область элемента.

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

Ссылки

Примеры

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