В данном уроке мы с вами займемся работой с фоном. Вы научитесь заливать элементы фоновым цветом и добавлять им фоновые картинки.

Блок . Свойство background-color

Самое простое, что может быть при работе с фоном - это заливка фона элемента одним цветом. Это делается с помощью свойства background-color, которое принимает те же значения, что и хорошо известное вам свойство color.

Давайте зальем блок зеленым фоном (цвет текста при этом сделаем белым):

<div>Lorem ipsum dolor sit amet.</div>
div {
	width: 300px;
	height: 100px;
	color: white;
	background-color: green; /* задаем зеленый цвет фона */
}

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet.

Блок . Свойство background-image

Свойство background-image задает фоновую картинку. Делается это следующим образом: background-image: url("путь к картинке").

Путь к картинке обычно берут в кавычки (двойные или одинарные), но можно также и без них.

Давайте в качестве фона блоку зададим следующую картинку:

Картинка смайла для фона.

Смотрите, что у нас получится - наша картинка размножится по всему блоку, замостит его:

<div></div>
div {
	width: 100%;
	height: 300px;
	border: 1px solid black;
	background-image: url("image.png"); /* задаем путь к фоновой картинке */
}

Так код будет выглядеть в браузере:

Блок . Свойство background-repeat

Как вы уже видели, по умолчанию фоновая картинка мостит собой весь блок. Однако, это поведение можно поменять с помощью свойства background-repeat.

Оно позволяет делать следующее: если задать значение no-repeat, то картинка вообще не будет повторяться, если задать значение repeat-x - будет повторяться по оси X (то есть по горизонтали), а если repeat-y - картинка будет повторяться по оси Y (по вертикали).

Ну, а значение repeat задает поведение по умолчанию - картинка будет повторяться по всем осям.

Давайте посмотрим, как работает это свойство.

Значение no-repeat

Давайте свойству background-repeat зададим значение no-repeat - в этом случае картинка не будет повторяться вообще и станет в верхний левый угол:

<div></div>
div {
	width: 100%;
	height: 300px;
	border: 1px solid black;
	background-image: url("image.png"); /* задаем путь к фоновой картинке */
	background-repeat: no-repeat; /* делаем так, чтобы картинка не повторялась */
}

Так код будет выглядеть в браузере:

Значение repeat-x

А теперь зададим значение repeat-x - фоновая картинка станет повторяться по горизонтали:

<div></div>
div {
	width: 100%;
	height: 300px;
	border: 1px solid black;
	background-image: url("image.png"); /* задаем путь к фоновой картинке */
	background-repeat: repeat-x; /* заставляем картинку повторяться по горизонтали */
}

Так код будет выглядеть в браузере:

Значение repeat-y

Ну, а теперь сделаем так, чтобы картинка повторялась по вертикали, задав свойству background-repeat значение repeat-y:

<div></div>
div {
	width: 100%;
	height: 300px;
	border: 1px solid black;
	background-image: url("image.png"); /* задаем путь к фоновой картинке */
	background-repeat: repeat-y; /* заставляем картинку повторяться по вертикали */
}

Так код будет выглядеть в браузере:

Блок . Свойство background-position

Когда мы рассматривали свойство background-repeat, я обращал ваше внимание на то, что по умолчанию фоновая картинка располагается в левом верхнем углу. Однако, это поведение можно поменять с помощью свойства background-position. Оно позволяет расположить фоновую картинку в любом удобном нам месте элемента.

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

Сдвиг фона ключевыми словами

С помощью ключевых слов можно двигать фон по горизонтали и по вертикали, но не в любое место, а в определенные позиции. К примеру, по горизонтали фон можно поставить слева (значение left), справа (значение right) и по центру (значение center), а по вертикали - сверху (значение top), по центру (значение center) и снизу (значение bottom).

Чтобы указать позицию фона, нужно написать, где он должен быть по горизонтали, а где по вертикали.

К примеру, значение right bottom, поставит фон в правый нижний угол, значение left bottom - в левый нижний угол, а значение left center - поставит фон по центру слева. Если вы хотите поставить фоновую картинку по центру всего блока - напишите center center. При этом можно использовать сокращенный вариант - не писать слово center два раза, а указать его один раз.

Давайте изучим следующие примеры, чтобы увидеть как это работает на практике.

Поставим для свойства background-position значение right bottom - правый нижний угол:

<div></div>
div {
	width: 100%;
	height: 300px;
	border: 1px solid black;
	background-image: url("image.png");
	background-repeat: no-repeat;
	background-position: right bottom;
}

Так код будет выглядеть в браузере:

А теперь значение left bottom - левый нижний угол:

<div></div>
div {
	width: 100%;
	height: 300px;
	border: 1px solid black;
	background-image: url("image.png");
	background-repeat: no-repeat;
	background-position: left bottom;
}

Так код будет выглядеть в браузере:

Значение center top - сверху по центру:

<div></div>
div {
	width: 100%;
	height: 300px;
	border: 1px solid black;
	background-image: url("image.png"); /* задаем путь к фоновой картинке */
	background-repeat: no-repeat; /* убираем повторение картинки */
	background-position: center top; /* ставим ее в вверху по центру */
}

Так код будет выглядеть в браузере:

Значение center bottom - снизу по центру:

<div></div>
div {
	width: 100%;
	height: 300px;
	border: 1px solid black;
	background-image: url("image.png");
	background-repeat: no-repeat;
	background-position: center bottom;
}

Так код будет выглядеть в браузере:

Значение right center - справа по центру:

<div></div>
div {
	width: 100%;
	height: 300px;
	border: 1px solid black;
	background-image: url("image.png");
	background-repeat: no-repeat;
	background-position: right center;
}

Так код будет выглядеть в браузере:

Значение center center - по центру и по вертикали и по горизонтали (напоминаю, что в этом случае можно написать одно слово center):

<div></div>
div {
	width: 100%;
	height: 300px;
	border: 1px solid black;
	background-image: url("image.png");
	background-repeat: no-repeat;
	background-position: center center;
}

Так код будет выглядеть в браузере:

Сдвиг фона указанными значениями

С помощью ключевых слов можно поставить фоновую картинку в ограниченное количество позиций. Если же вам нужно поставить фон в какое-то другое место - нужно точно указать его позицию в пикселях или в процентах.

Для этого значением background-position указывается два значения, при этом первое значение - это сдвиг фона по горизонтали от левого края блока, а второе значение - это сдвиг фона по вертикали от верхнего края блока.

Сдвинуть фон от другого края (например от правого или от нижнего) обычными средствами невозможно, нужно исхитряться различными способами, которые мы пока не будем трогать (тут скоро появится ссылка на описание подобных способов).

Давайте сдвинем фоновую картинку на 100px вправо, и на 30px вниз. Для этого необходимо написать следующее значение - 100px 30px:

<div></div>
div {
	width: 100%;
	height: 300px;
	border: 1px solid black;
	background-image: url("image.png");
	background-repeat: no-repeat;
	background-position: 100px 30px;
}

Так код будет выглядеть в браузере:

А теперь сдвинем фон вправо на 90% от ширины блока и вниз на 30px. Для этого напишем 90% 30px:

<div></div>
div {
	width: 100%;
	height: 300px;
	border: 1px solid black;
	background-image: url("image.png");
	background-repeat: no-repeat;
	background-position: 90% 30px;
}

Так код будет выглядеть в браузере:

Можно комбинировать значения и ключевые слова. Сдвинем, к примеру, фон на 90% вправо, а по вертикали поставим по центру - 90% center:

<div></div>
div {
	width: 100%;
	height: 300px;
	border: 1px solid black;
	background-image: url("image.png");
	background-repeat: no-repeat;
	background-position: 90% center;
}

Так код будет выглядеть в браузере:

Добавим repeat-y

Давайте теперь сделаем так, чтобы фоновая картинка повторялась, к примеру, по оси Y (то есть по вертикали) и поставим получившуюся линию в правый верхний угол:

<div></div>
div {
	width: 100%;
	height: 300px;
	border: 1px solid black;
	background-image: url("image.png");
	background-repeat: repeat-y; /* картинка повторяется по оси Y */
	background-position: right top; /* позиция картинки - правый верхний угол */
}

Так код будет выглядеть в браузере:

Блок . Свойство background-attachment

Свойство background-attachment задает то, будет ли прокручиваться фон месте с текстом (значение scroll, по умолчанию) или оставаться на месте (значение fixed).

Как это выглядит на практике, лучше всего посмотреть на примерах, в которых специально добавлено много текста, фон и вертикальная полоса прокрутки.

В следующем примере для body установлена фоновая картинка-узор. По умолчанию узор заполняет собой все окно браузера (хотя сама картинка узора имеет размер порядка 100 на 100 пикселей). Свойство background-attachment установлено в значение scroll и поэтому фон будет прокручиваться вместе с текстом:

body {
	background-image: url("image.png");
	background-attachment: scroll;
}

Открыть пример на всю страницу браузера.

А теперь текст будет прокручиваться по фону, а фон будет оставаться на месте, так как для background-attachment задано значение fixed:

body {
	background-image: url("image.png");
	background-attachment: fixed;
}

Открыть пример на всю страницу браузера.

Блок . Свойство-сокращение background

Для фона, также как и для многих других вещей, существует свойство-сокращение background, в котором можно в любом порядке писать значения всех тех свойств, которые мы с вами разобрали.

Смотрите пример:

<div></div>
div {
	width: 100%;
	height: 300px;
	border: 1px solid black;
	background: green url("image.png") repeat-x left bottom;
}

Этот код эквивалентен следующему коду:

div {
	width: 100%;
	height: 300px;
	border: 1px solid black;
	background-color: green;
	background-image: url("image.png");
	background-repeat: repeat-x;
	background-position: left bottom;
}

Так код будет выглядеть в браузере:

Обратите внимание на то, что в тех местах, где нет фоновых картинок, проступает цвет фона.