CSS. Блочная модель

Фон элемента

За фон в CSS отвечает свойство background. Это свойство включает в себя следующий набор:

background-color: устанавливает цвет фона
background-image: в качестве фона устанавливается изображение

background-image: url(dubi.png);
Это свойство принимает одно значение: ключевое слово url, после которого в скобках идет путь к файлу изображения. В данном случае имеется в виду, что в одной папке рядом с веб-страницей находится файл dubi.png.
Также можно использовать абсолютные адреса URL, например:
background-image: url(http://localhost.com/someimage.png); Либо можно использовать относительные адреса - относительно html-документа или корневого каталога сайта:
background-image: url(../images/someimage.png); /* путь относительно html-документа */

background-repeat: режим повторения фонового изображения по всей поверхности элемента
background-size: размер фонового изображения
background-position: указывает позицию фонового изображения
background-attachment: устанавливает стиль прикрепления фонового изображения к элементу
background-clip: определяет область, которая вырезается из изображения и используется в качестве фона
background-origin: устанавливает начальную позицию фонового изображения

Например:

	
			<style>
			div{
			width: 250px;
			height: 200px;
			margin: 10px;
			}
			
			.colored{
			background-color: #ff0507;
			}
			
			.imaged{
			background-image: url(dubi.png);
			}
			</style>
			
			
			<div class="colored">Первый блок</div>
			<div class="imaged">Второй блок</div>

Первый блок

Второй блок

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

Повторение изображения. repeat

изображение может не полностью покрывать поверхность элемента, и поэтому для полного покрытияCSS начинает. по умолчанию повторять изображение.

Свойство background-repeat регулирует механизм повторения:

repeat-x: повторение по горизонтали
repeat-y: повторение по вертикали
repeat: повторение по обеим сторонам (действие по умолчанию)
space: изображение повторяется для заполнения всей поверхности элемента, но без создания фрагментов
round: изображение должным образом масштабируется для полного заполнения всего пространства
no-repeat: изображение не повторяется

Например:

	
div{
width: 200px;
height: 150px;

background-image: url(dubi.png);
background-repeat: round;
}

Заполняем блок изображением

Свойство background-size

позволяет установить размер фонового изображения(ширина и высота).

Если задаются точные размеры, то вначале указывается ширина, а потом высота изображения: background-size: 200px 150px; /* ширина 200 пикселей, высота 150 пикселей */ Можно задать точное значение для одного измерения - ширины или высоты, а для другого задать автоматические размеры: background-size: 200px auto; /* ширина 200 пикселей, автоматическая высота */

Для установки размера используются единицы измерения пиксели, проценты, или предустановленные значения:

contain: масштабирует изображение по наибольшей стороне, сохраняя аспектное отношение
cover: масштабирует изображение по наименьшей стороне, сохраняя аспектное отношение
auto: значение по умолчанию, изображение отображается в полный размер

Что бы изображение оптимальнее было вписано в фон, то для обеих настроек можно установить значение 100%: background-size: 100% 100%;

<style>
div{
width: 200px;
height: 150px;
margin: 10px;

border: black solid 1px;
background-image: url(dubi.png);

}
.imaged1{

background-size: cover;
}
.imaged2{

background-size: 140px 110px;
}
</style>

<div class="imaged1 "></div>
<div class="imaged2 "></div>

Позиция изображения background-position

Свойство background-position управляет позицией фонового изображения внутри элемента.

Оно принимает отступы от верхнего левого угла элемента в единицах измерения, например, в пикселях в следующем формате: background-position: отступ_по_оси_X отступ_по_оси_Y;

Например:

<style>
.lll div{
width: 300px;
height: 250px;
margin: 10px;

border: 1px solid #ccc;
background-color: #eee;
background-image: url(dubi.png);
background-repeat: no-repeat;
background-position: 20px 15px;	
}
</style>

<div>Туман начинал расходиться, и неопределенно,
верстах в двух расстояния, виднелись уже 
неприятельские войска на противоположных 
возвышенностях...</div>

Туман начинал расходиться, и неопределенно, верстах в двух расстояния, виднелись уже неприятельские войска на противоположных возвышенностях...

Кроме того, данное свойство может принимать следующие значения:

top: выравнивание по верхнему краю элемента
left: выравнивание по левому краю элемента
right: выравнивание по правому краю элемента
bottom: выравнивание по нижнему краю элемента
center: изображение располагается по центру элемента

Например:

background-position: top right; Здесь изображение выравнивается по верху и правому краю, то есть будет располагаться в правом верхнем углу элемента.

Свойство background-attachment

Усьанавливает, как фоновое изображение будет прикреплено к элементу. Это свойство может принимать следующие значения:

fixed: фон элемента фиксирован вне зависимости от прокрутки внутри элемента
local: по мере прокрутки внутри элемента фон изменяется
scroll: фон фиксирован и не меняется при прокрутке, но в отличие от fixed несколько элементов могут использовать свой фон, тогда как при fixed создается один фон для всех элементов

Например:

div{
width: 300px;
height: 250px;


overflow:scroll;	/* добавляем прокрутку  */
border: 1px solid #ccc;

background-image: url(dubi.png);
background-size: 512px 384px;
background-attachment: scroll;
background-repeat: no-repeat;
}

Свойство background-origin

Указывает позицию на изображении, с которой будет начинаться собственно фоновое изображение для элемента. Оно может принимать следующие значения:

border-box: фон у элемента устанавливается начиная с его внешней границы, определяемой свойством border
padding-box: фон устанавливается с учетом внутренних отступов
content-box: фон устанавливается по содержимому элемента

Используем все три значения:

<style>
.lv div{
width: 200px;
height: 200px;
margin: 10px;
display: inline-block;	/* располагаем блоки в ряд */
color: #eee;

padding:15px;
border: 15px solid rgba(23,23,23,0.2);

background-image: url(cats.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.borderBox {background-origin: border-box;}
.paddingBox {background-origin: padding-box;}
.contentBox {background-origin: content-box;}
</style>


<div class="borderBox">
Вся власть - котикам!
</div>
<div class="paddingBox">
Вся власть - котикам!
</div>
<div  class="contentBox">
Вся власть - котикам!
</div>

Вся власть - котикам!

Свойство background-clip

Oпределяет, какая часть изображения используется для фона. Он принимает те же значения:

border-box: изображение обрезается по границам элемента
padding-box: из изображения исключается та часть, которая находится под границами элемента
content-box: изображение обрезается по содержимому с учетом внутренних отступов

Например, если к предыдущей разметке мы применим следующие стили:

	div{
	width: 200px;
	height: 200px;
	margin: 10px;
	display: inline-block;
	
	color: #eee;
	padding:15px;
	border: 15px solid rgba(23,23,23,0.1);
	
	background-image: url(cats.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	}
	.borderBox{background-clip: border-box;}
	.paddingBox{background-clip: padding-box;}
	.contentBox{background-clip: content-box;}

Тогда мы получим следующий результат:

Вся власть - котикам!

Свойство background

По сути оно является сокращением всех ранее рассмотренных свойств CSS в формате:

background: <background-color> <background-position> <background-size> <background-repeat> <background-origin> <background-clip> <background-attachment> <background-image>

Например, если у нас есть следующий набор свойств:

background-image: url(cats.jpg);
background-color: #eee;
background-repeat: no-repeat;
background-clip: border-box;
background-origin: border-box;
background-attachment: local;

То мы их можем сократить следующим образом:

background: #eee no-repeat border-box local url(cats.jpg);