Свойство background CSS позволяет управлять фоном любого элемента (тем, что отрисовывается под содержимым этого элемента). Это сокращенное свойство и оно позволяет записать несколько параметров в одной инструкции. Например:
body {
background: url(img.jpg) /* фоновое изображение */
top center / 200px 200px /* позиция / размер */
no-repeat /* повтор */
fixed /* фиксация фона */
padding-box /* позиционирование */
red; /* цвет */
}Всего у фона есть восемь свойств, и все они начинаются со слова background:
- background-color;
- background-image;
- background-repeat;
- background-attachment;
- background-position;
- background-size;
- background-clip;
- background-origin.
Их можно использовать по отдельности или комбинировать, как показано в первом абзаце. Если конкретное свойство не задано оно будет установлено в значение по умолчанию.
background-color
Свойство устанавливает цвет фона элемента, к которому оно относится. Его можно задать несколькими способами:
- словом (названием цвета по-английски),
- шестнадцатеричным числом, предваряя его решеткой;
- с помощью RGB-кода.
На примере задали фон у квадрата с помощью инструкции background-color: blue.
See the Pen
background-color by Андрей (@adlibi)
on CodePen.
По умолчанию фон в HTML у страницы или любого элемента является полностью прозрачным, то есть ему присвоено значение transparent (отсутствие какого-либо цвета).
background-image
С помощью этого свойства в качестве фона для сайта можно поставить изображение. Указывая значения других свойств, можно изменять его размер, определять место на странице и повторять как в горизонтальном, так и в вертикальном направлении. Указателем на рисунок в таблице является путь к файлу-изображению, который записывается с помощью конструкции url. Следует помнить, что тег img, в отличие от свойства image, является частью языка html.
See the Pen
background-image by Андрей (@adlibi)
on CodePen.
Если для элемента установлено значение цвета фона, то он будет виден до окончания загрузки картинки, а также сквозь ее прозрачные участки.
background-repeat
Является дополнением к предыдущему свойству и уточняет, как повторяется внутри блока изображение, использованное в качестве фона. По умолчание установлено repeat – повтор и по горизонтали и по вертикали.
На примере использовано значение свойства repeat-x, при котором фоновая картинка повторяется только по горизонтали.
See the Pen
background-repeat by Андрей (@adlibi)
on CodePen.
background-attachment
Свойство устанавливает, будет ли фоновый рисунок привязан к содержимому элемента, то есть будет ли оно прокручиваться вместе с ним (при наличии полосы прокрутки). Присвоение свойству значения scroll приведет к прокручиванию, в случае установки его в состояние fixed оно будет неподвижно. Значение по умолчанию – scroll.
На примере использовано свойство background-attachment: fixed. При скроллинге содержимого элемента фон остается неподвижным.
See the Pen
background-attachment by Андрей (@adlibi)
on CodePen.
background-position
Дает возможность установить точное местоположение фонового изображения и использует два значения, указывающих координаты по горизонтали и вертикали и записываемых через пробел. Свойство background-position позволяет применять различные способы – названия сторон элемента (left, right, top, bottom, center), проценты, миллиметры, пиксели.
Значение по умолчанию – 0, то есть левый верхний угол изображения помещается в левый верхний угол элемента.
На примере изображение сдвинуто вправо на 20px и вниз на 40px;
See the Pen
background-position by Андрей (@adlibi)
on CodePen.
background-size
С помощью свойства можно осуществить изменение величины фоновой картинки, то есть использовать ее масштабирование. Размер можно изменять используя любые единицы, которые допустимы в таблицах CSS – проценты, пиксели, em (величина применяемого в блоке шрифта).
При этом значение cover пропорционально увеличивает рисунок до ближайших размеров – ширины или высоты, contain – позволяет полностью заполнить блок, также сохраняя соотношение ширины и высоты.
Значение по умолчанию – auto.
На примере мы взяли квадрат размером 200×200 и фоновую картинку меньшим размером – 100×100, которой заполнили заполнили всю область фона с помощью background-size: cover.
See the Pen
background-size by Андрей (@adlibi)
on CodePen.
background-clip
Дает возможность определить взаимодействие границ фона и отступов элемента. Предусмотрены три варианта – под границами (border-box – по умолчанию), с учетом отступов (padding-box), внутри контента (content-box).
На демонстрации наглядно видны все три варианта. Обратите внимание, что рамка у первого элемента зеленого цвета, что получилось из наложения желтого фона и голубой полупрозрачной границы.
See the Pen
background-clip by Андрей (@adlibi)
on CodePen.
background-origin
Действует аналогично предыдущему свойству, но применяется в отношении фонового рисунка. То есть определяет точку начала отсчета координат левого верхнего угла вставленного изображения – это наружный или внутренний угол границы или левый верхний угол содержимого. Имеет такие же значения – border-box, padding-box, content-box. Значение по умолчанию – padding-box.
Множественные фоны
Таблицы CSS позволяют сделать фон, состоящим из нескольких слоев изображений, количество которых определяется числом значений, вводимых последовательно через запятую после background-image. При этом картинки ложатся друг под друга сверху вниз, начиная с первого. Каждую из них можно определить с помощью указания значений других свойств, имеющих отношение к изображению. Присваивая слою состояние прозрачности, его можно скрывать.
Таким образом, установка значений свойств фона в CSS дает возможность окрасить его в любой цвет, приняв в учет различные элементы блока (свойства color и clip). Вместо этого или дополнительно внутри элемента можно поместить фоновое изображение, выбрав для него определенное место, увеличив или уменьшив при этом, а также при необходимости повторив его в горизонтальном или/и вертикальном направлении (свойства image, size, position, attachment, repeat, origin).
Следует иметь в виду, что рассмотренные свойства не наследуют своих родителей, но цвет фона наследника ввиду его значения по умолчанию, равного transparent, будет таким же, как и родительский. Для наследования свойства необходимо устанавливать его в значение inherit.