CSS/Фон

Свойства

Свойства, которые устанавливают фон элемента:

background

Это универсальное свойство, которое задаёт параметры фона элемента. Можно указывать через пробел в любой последовательности необходимые свойства.

background-attachment

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

background-color

Устанавливает цвет фона, который будет виден, если не задано фоновое изображение.

background-image

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

background-position

Начальное положение изображения, которое задаётся по горизонтали и вертикали. В качестве значений используются ключевые слова (top, bottom, center, left, right) либо другие единицы.

Ещё есть пара нестандартных свойств background-position-x и background-position-y, которые задают соответственно положение фонового изображения по горизонтали и вертикали.

background-repeat

Способ повторения изображения.

Возможные значения:

• no-repeat — без повторения;
• repeat — с повторением; (значение по умолчанию)
• repeat-x — с повторением только по горизонтали;
• repeat-y — только по вертикали.

background-clip, background-origin и background-size

В CSS3 также появились три новых свойства: background-clip, background-origin и background-size.

Свойство background-clip определяет область рисования фоновых изображений, а background-origin — область позиционирования.

Свойство background-size изменяет масштаб фонового изображения.

Примеры

Подробная форма записи:

p {
  background-color: #ccc;
}

body {
  background-color: #8cf;
  background-image: url('sea.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: bottom;
}

Сокращённая форма записи:

p {
  background-color: #ccc;
}

body {
  background: #8cf url('sea.jpg') no-repeat fixed bottom;
}