CSS/Фон

Материал из Викиучебника — открытых книг для открытого мира
< 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;
}