Как установить фон при помощи CSS свойства background
Для того, чтобы задать фон для какого-либо 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.
Комментарии (0)
Для комментирования войдите или зарегистрируйтесь.
Последние статьи
- ИТ / Разное 08.07.21 Как бесплатно сделать перевод для сайта без API, перевод документов в Google Translate
- ИТ / Разное 06.07.21 Как сделать кнопку подписки на сайте, базу подписчиков и автоматическую рассылку
- Еда / Разное 06.07.21 Как быстро приготовить вкусные жаренные пирожки с картошкой и луком
- ИТ / Разное 04.07.21 Кэширование - создание, загрузка и сброс. Где хранить кэш, способы и виды кэширования
- ИТ / Базы данных 03.07.21 Свой NoSQL - хранение данных в файлах и не только в базе данных. Хранение настроек, небольших данных и файлов кеширования