Все, что вам нужно знать свойтсе background и его прозводных

Главная

База знаний

Семейство свойств Background

18 мая 2024 г.

Автор

Алексей Овсянников

Cвойство background

Кратко объявляет следующие свойства фона: background-image, background-color, background-repeat, background-attachment, background-position, background-clip, background-origin и background-size.

Не обязательно указывать все перечисленные свойства, так как любое пропущенное свойство примет значение по умолчанию. При включении свойства background-size в сокращенную нотацию, его значения следует разделять прямой косой чертой (/), чтобы отличить его от свойства background-position.

Синтаксис

background: #ffffff;
background: url('catfront.png') repeat-x;
background: no-repeat center/75% url('/src/assets/product-bg.webp');
background: inherit;

Cвойство background-image

Устанавливает фоновое изображение элемента.

Синтаксис

background-image: none;
background-image: url(http://pattern.dev/logo.png);
background-image: url(sweettexture.jpg);
background-image: linear-gradient(to bottom, rgba(255, 255, 0, 0.5), rgba(0, 0, 255, 0.5)),
    url('catfront.png');
background-image: repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);
background-image: initial;
background-image: inherit;

Значения

изображение: Обозначает 2D-изображение. Это может быть ссылка на URL, нотация image() или запись градиента. Значение по умолчанию none.
initial: Устанавливает значение свойства в значение по умолчанию.

Cвойство background-color

Задает цвет фона элемента и может быть использовано для создания визуально привлекательного дизайна. Принимает широкий диапазон значений цвета, включая именованные цвета, шестнадцатеричные коды цветов, значения RGB и HSL. Его также можно установить в значение transparent, чтобы сделать фон элемента прозрачным и открыть основное содержимое.

Синтаксис

background-color: #234f81;
background-color: hsla(345, 100%, 50%, 0.81);
background-color: currentColor;
background-color: oklch(81.3% 0.321 149);
background-color: initial;
background-color: inherit;

Значения

цвет: Значение принимает все форматы цвета свойства color. Значение по умолчанию transparent.
initial: Устанавливает значение свойства в значение по умолчанию.
inherit: Наследует значение свойства от родительского элемента.

Cвойство background-repeat

Используется для управления повторением фонового элемента, у которого фоновое изображение задано с помощью свойства background-image. Это свойство определяет, должно ли изображение повторяться, и если да, то в каком направлении.

Синтаксис

background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;
background-repeat: repeat repeat;
background-repeat: repeat space;
background-repeat: no-repeat round;
background-repeat: round space;
background-repeat: initial;
background-repeat: inherit;

Значения

repeat-x: Изображение повторяется по горизонтали. Разрешается как repeat, если присутствует no-repeat.
repeat-y: Изображение повторяется по вертикали. Разрешается как no-repeat repeat.
repeat: Изображение повторяется в обоих направлениях столько раз, сколько необходимо для покрытия фоновой области. Если изображение слишком большое, оно обрезается. Это значение по умолчанию.
space: Изображение повторяется столько раз, сколько возможно без обрезки, с равным расстоянием между изображениями. Первое и последнее изображения касаются краев области. Если область фона больше, чем область позиционирования фона, рисунок повторяется, чтобы заполнить область фона. Если места для двух копий изображения недостаточно, размещается только одно изображение, и его положение определяется свойством background-position. Оно разрешается в space space.
round: Изображение повторяется столько раз, сколько необходимо для заполнения фоновой области, при необходимости масштабируется без обрезки. Разрешается как round round.
no-repeat: Изображение размещается один раз и не повторяется. Вычисляется в no-repeat no-repeat.
initial: Устанавливает значение свойства в значение по умолчанию.
inherit: Наследует значение свойства от родительского элемента.

Cвойство background-attachment

Используется для управления расположением фонового изображения относительно области просмотра при прокрутке содержимого. Это свойство определяет, будет ли фоновое изображение зафиксировано на месте или прокручиваться вместе с содержимым элемента.

Синтаксис

background-attachment: fixed;
background-attachment: scroll;
background-attachment: local;
background-attachment: initial;
background-attachment: inherit;

Значения

fixed: Предотвращает перемещение, фиксирует фоновое изображение на заднем план
scroll: Фоновое изображение прокручивается вместе с текстом и другим содержимым. Значение по умолчанию.
local: Фоновое изображение прокручивается вместе с содержимым элемента.
initial: Устанавливает значение свойства в значение по умолчанию.

Cвойство background-position

Используется для управления размещением фонового изображения внутри элемента, у которого фоновое изображение задано с помощью свойства background-image.

Свойство так же задает горизонтальное и вертикальное положение фонового изображения относительно границы элемента.

Синтаксис

background-position: bottom;
background-position: left;
background-position: center;
background-position: top;
background-position: bottom;
background-position: 4% 16%;
background-position: 1vmin 2vw;
background-position: 8ex 10%;
background-position: 2.5em 6em, right;
background-position: center 11% left;
background-position: top right 10px;
background-position: initial;
background-position: inherit;

Значения

%: Горизонтальное смещение вычисляется по формуле ширина области расположения фона — ширина фонового изображения. Вертикальное смещение по формуле высота области расположения фона - высота фонового изображения, где размер изображения — это размер, заданный свойством background-size. Значение по умолчанию 0% 0%.
длина: Значение длины дает фиксированную длину в качестве смещения.
top: Вычисляет в 0% для вертикальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно верхнего края.
bottom: Вычисляет в 100% для вертикальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно нижнего края.
center: Вычисляет в left 50% для горизонтального положения, если не указано иное горизонтальное положение, или как top 50% для вертикального положения, если оно задано.
right: Вычисляет в 100% для горизонтального положения, если задано одно или два значения, в противном случае смещение происходит относительно правого края.
left: Вычисляет до 0% для горизонтальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно левого края.
initial: Устанавливает значение свойства в значение по умолчанию.
inherit: Наследует значение свойства от родительского элемента.

Если указано только одно значение, второе значение принимается за центр. Если указаны два значения length или %, первое представляет горизонтальное положение, а второе - вертикальное. Значения в единицах длины или % представляют собой смещение верхнего левого угла фонового изображения от верхнего левого угла области компоновки фона.

Пара ключевых слов может быть переупорядочена, а комбинация ключевого слова и длины или процента - нет. Например, center left - допустимое значение, а 50% left - нет.

Если указаны три или четыре значения длины или %, перед каждым значением должно стоять ключевое слово, указывающее, от какого края задается смещение. Если указаны только три значения, недостающее смещение принимается равным нулю. Положительные значения смещают изображение внутрь от края фоновой области макета, а отрицательные - наружу от края.

Cвойство background-clip

Используется для управления областью элемента, к которой применяется фоновое изображение и цвет. Свойство определяет, распространяется ли фон под элементом или только в пределах поля подложки, границы или содержимого элемента.

Синтаксис

background-clip: border-box;
background-clip: content-box;
background-clip: padding-box;
background-clip: initial;
background-clip: inherit;

Значения

border-box: Фон закрашивает область в пределах рамки элемента. Значение по умолчанию.
content-box: Фон закрашивает только область содержимого.
padding-box: Фон закрашивает область в пределах внутренних полей элемента.
initial: Устанавливает значение свойства в значение по умолчанию.
inherit: Наследует значение свойства от родительского элемента.

Cвойство background-origin

Используется для контроля фонового изображения, у которого фоновое изображение задано с помощью свойства background-image.

Свойство определяет поле, относительно которого позиционируется и обрезается фоновое изображение.

Синтаксис

background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;
background-origin: initial;
background-origin: inherit;

Значения

border-box: Фон позиционируется относительно верхних границ рамки элемента.
padding-box: Фон позиционируется относительно верхних границ области внутренних полей элемента. Значение по умолчанию.
content-box: Фон позиционируется относительно верхних границ области содержимого элемента.
initial: Устанавливает значение свойства в значение по умолчанию.
inherit: Наследует значение свойства от родительского элемента.

Если для элемента установлено background-attachment: fixed, свойство не будет иметь эффекта.

Если для элемента заданы background-clip: padding-box, background-origin: border-box, background-position: top left, и элемент имеет ненулевую рамку, тогда верхняя и левая части фонового изображения будет обрезаны.

Cвойство background-size

Используется для управления размером фонового изображения внутри элемента, у которого фоновое изображение задано с помощью свойства background-image. Это свойство задает ширину и высоту фонового изображения

Синтаксис

background-size: contain;
background-size: cover;
background-size: 39%;
background-size: 0.6rem;
background-size: 12px;
background-size: auto;
background-size: 3em 25%;
background-size: auto, auto;
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;
background-size: initial;
background-size: inherit;

Значения

auto(значение по умолчанию): Высота и ширина изображения равны его оригинальным размерам.
фиксированная длина: Размер задается парой значений, где первое значение задает ширину изображения, а второе - высоту. Чтобы фон масштабировался вместе с текстом, размер изображения должен быть задан в единицах em.
%: Масштабирует изображение пропорционально, чтобы заполнить ширину или высоту блока, в зависимости от того, что меньше.
cover: Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain: Масштабирует изображение пропорционально, чтобы оно поместилось внутри блока.
initial: Устанавливает значение свойства в значение по умолчанию.
inherit: Наследует значение свойства от родительского элемента.