Свойство 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>Значение 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;
}

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

А теперь текст будет прокручиваться по фону, а фон будет оставаться на месте, так как для
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;
}

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

Задачи на основы работы с фоном

Повторите страницу по данному по образцу.

Повторите страницу по данному по образцу.