Свойство background

Свойство background-color устанавливает цвет фона, например следующая запись задает оранжевый фон для веб-страницы:

body {
  background-color: orange;
}

Свойство background-image позволяет вывести в качестве фона произвольное изображение:

body {
  background-image: url("body.jpg");
}

Например, данное CSS-правило выведет на странице файл body-bg.jpg в качестве фонового изображения. Обратите внимание, что изображение будет растиражировано на всю высоту и ширину страницы. Изменить такое поведение браузера по-умолчанию можно с помощью свойства background-repeat, например:

body {
  background-image: url("body.jpg");
  background-repeat: no-repeat;
}

Возможны следующие значения свойства background-repeat:

  • repeat – повторяет изображение и по вертикали и по горизонтали
  • repeat-x – повторяет изображение только по горизонтали
  • repeat-y – повторяет изображение только по вертикали
  • no-repeat – отключает повторение изображения
  • initial – возвращает свойство к значению по-умолчанию
  • inherit – наследует значение данного свойства от родительского элемента

Свойство background-attachment устанавливает поведение фонового изображения при скроллировании, т. е. прокручивании страницы в браузере. Возможны следующие значения данного свойства:

  • scroll – фоновое изображение прокручивается вместе с элементом
  • fixed – фиксирует фоновое изображение
  • local – фон прокручивается вместе с содержимым элемента
  • initial – возвращает свойство к значению по-умолчанию
  • inherit – наследует значение данного свойства от родительского элемента

Наконец, свойство background-position определяет позицию фонового изображения относительно левого и верхнего краев элемента. Обе координаты устанавливаются указанием отступов в пикселях, процентах или с помощью специальных ключевых слов left, right, top, bottom и center. Например:

  background-position: 0 0; /* значение по-умолчанию */
  background-position: 10px 20px;
  background-position: 50% 10%;
  background-position: right top;
  background-position: center;

Все перечисленные свойства семейства background могут быть объединены в одну сокращенную запись:

  background: orange url("body-bg.jpg") no-repeat fixed right top;

В этой записи важен порядок следования значений (color, image, repeat, attachment, position), но допускаются пропуск отдельных элементов:

  background: url("body-bg.jpg") no-repeat right top;

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

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position