Как установить фон при помощи CSS свойства background

12.08.18 CSS 184

Для того, чтобы задать фон для какого-либо HTML элемента, в CSS существуют специальное свойство – background. Это сокращенная запись множества свойств, отвечающих за управление внешним видом элемента. Значения можно указать в произвольном порядке, браузер способен самостоятельно определить, какое из них соответствует нужному свойству.

Среди множества свойств для установки фона обычно выделяют следующие:

• background-attachment - устанавливает, будет ли фоновое изображение прокручиваться вместе с содержимым элемента. Возможные значения: fixed, scroll, inherit, local;
• background-clip - определяет, как фоновая картинка или цвет фона будет выводиться под границами. Возможные значения: padding-box, border-box, content-box;
• background-color – служит для определения цвета фона элемента. Возможные значения: transparent, inherit;
• background-image - устанавливает фоновое изображение для элемента. Возможные значения: url, none, inherit;
• background-origin - определяет область позиционирования фонового рисунка. Значения: padding-box, border-box, content-box;
• background-position - задает начальное положение фонового изображения, установленного с помощью соответствующего свойства. Значения: inherit, а также px, em и т.д.;
• background-position-x - задает положение фонового изображения внутри элемента по горизонтали, является нестандартным свойством и не входит в спецификацию. Значения: inherit, left, center, right, а также px, em и т.д.;
• background-position-y - задает положение фонового изображения внутри элемента по вертикали, является нестандартным свойством и не входит в спецификацию. Значения: inherit, top, center, bottom, а также px, em и т.д.;
• background-repeat - определяет, как будет повторяться фоновое изображение, установленное с помощью соответствующего свойства. Значения: no-repeat, repeat, repeat-x, repeat-y, inherit, space, round;
• background-size – устанавливает масштаб фонового изображения согласно заданным размерам. Значения: auto, cover, contain, а также %, px, em и т.д.

Таким образом, универсальное свойство background содержит в себе множество свойств, которые можно записать как по отдельности, так и за один раз в свойстве background.