CSS/Фон: различия между версиями

< CSS
Содержимое удалено Содержимое добавлено
Новая страница: «== Свойства, которые устанавливают фон элемента: == === background === Это универсальное свойство…»
(нет различий)

Версия от 20:24, 25 апреля 2014

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

background

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

background-attachment

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

background-color

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

background-image

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

background-position

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

background-repeat

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

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

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

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

В 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;
}