Фон - CSS свойства

Краткое описание свойств

background-color

Задание цвета фона элемента.

background-image

Установка изображения в качестве фона.

background-repeat

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

background-attachment

Поведение фонового изображения при прокрутке элемента.

background-position

Положение фонового изображения.

background

Общее свойство для задания фона.

Свойство background-color

Используется для задания цвета фона элемента HTML-страницы.

Краткая информация

Значения

• transparent - устанавливает прозрачный фон. Используется по умолчанию.
• Любой формат задания цвета в CSS.

Свойство background-image

Позволяет установить любую картинку в качестве фона.

Краткая информация

Значения

• none - без использования изображения.
• Любой формат задания изображения в CSS.

Примечания

До загрузки картинки фон отображается того цвета, который указан в background-color.

Свойство background-repeat

Определяет, будет ли изображение повторяться, если оно не полностью перекрывает элемент.

Краткая информация

Значения

• repeat - указывает браузеру, что необходимо замостить фон рисунком, заданным с помощью background-image. Рисунок повторяется по горизонтали и по вертикали.
• no-repeat - рисунок отображается один раз. Положение рисунка задается с помощью background-position.
• repeat-x - рисунок повторяется по горизонтали.
• repeat-y - рисунок повторяется по вертикали.

Свойство background-attachment

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

Краткая информация

Значения

• scroll - фоновый рисунок прокручивается вместе с содержимым страницы.
• fixed - фоновый рисунок зафиксирован на месте и не прокручивается.

Свойство background-position

Задаёт положение рисунка. Указываются две координаты: горизонтальная и вертикальная.

Краткая информация

Значения

• Числовой - абсолютный или относительный, используя соответствующие единицы измерения.
• Используя ключевые слова. Для горизонтальной координаты:
  • left - слева (0%).
  • center - по центру (50%).
  • right - справа (100%).
  Для вертикальной координаты:
  • top - вверху (0%).
  • center - по центру (50%).
  • bottom - внизу (100%).

Примечания

Если задана только одна координата, то она считается горизонтальной, а для вертикальной принимается значение center.

Свойство background

Общее свойство для задания фона. Объединяет в себе свойства background-color, background-image, background-repeat, background-attachment и background-position. Значения перечисляются через пробел в любой последовательности.

Можно использовать несколько фоновых изображений, разделяя их запятой. Если используется несколько фоновых рисунков, то значение background-color должно указываться после перечисления всех фоновых изображений.

Краткая информация