Свойство CSS background

background-color (Цвет фона)

Это фундаментальное свойство задает сплошной цвет фона элемента. Он отображается под всеми фоновыми изображениями, что делает его идеальным для создания фонового заполнения или "подложки". Цвет можно задавать с помощью различных форматов: ключевыми словами (red, transparent), HEX-кодом (#ff0000 или #f00), RGB/RGBA (rgb(255, 0, 0) или rgba(255, 0, 0, 0.5)). Использование RGBA с альфа-каналом — отличный способ наложить цветную полупрозрачную пленку поверх фонового изображения, не редактируя само изображение, что широко используется в современных дизайнерских приемах.

div {
    background-color: blue;
}

background-image (Фоновое изображение)

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

Кроме ссылок на файлы, с помощью функции linear-gradient() или radial-gradient() можно создавать градиентные фоны непосредственно в коде, без использования графических редакторов.

div {
    background-image: url(image.jpg);
}
    
div {
    background-image: linear-gradient(red, blue);
}

background-size (Масштабирование фона)

Свойство background-size - это одно из самых важных свойств для создания адаптивных фонов. Оно контролирует размер фонового изображения. Ключевые значения: px, %, auto (размер по умолчанию), cover и contain.

div {
    background-image: url(image.jpg);
    background-size: 350px auto;
}

background-repeat (Повторение фона)

Свойство background-repeat - управляет тем, как фоновое изображение будет повторяться, если его размеры меньше размеров самого элемента. По умолчанию установлено значение repeat, которое заставляет изображение тиражироваться по осям X и Y, заполняя всю площадь.

Ключевые значения: repeat (повторять по обеим осям), repeat-x (только по горизонтали), repeat-y (только по вертикали) и no-repeat (не повторять вообще). Современное значение space равномерно распределяет копии изображения по области, без обрезки, а round масштабирует изображение так, чтобы оно целиком поместилось целое число раз.

div {
    background-image: url(image.jpg);
    background-size: 35% auto;
    background-repeat: repeat;
}

background-position (Позиционирование фона)

Свойство background-position - пределяет начальную позицию фонового изображения внутри элемента. Это особенно полезно в связке с background-repeat: no-repeat. Позицию можно задавать с помощью ключевых слов (left, center, right, top, bottom), процентов или абсолютных единиц (px, em).

Использование процентов — мощный прием. Значение 0% 0% поместит изображение в левый верхний угол элемента, а 100% 100% — правый нижний угол элемента. Значение center center (или просто center) выровняет изображение по центру элемента.

div {
    background-image: url(image.jpg);
    background-size: 35% auto;
    background-repeat: no-repeat;
    background-position: left top;
}

background-attachment

Свойство background-attachment - управляет поведением фона при прокрутке страницы. Оно может создавать интересные параллакс-эффекты. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом. Можно указать несколько значений для ряда фоновых изображений, перечисляя значения через запятую

div {
    background-image: url(image.jpg);
    background-attachment: scroll;
}

background-clip (Обрезка фона)

Свойство background-clip - определяет область, до которой должен простираться фон элемента (и цвет, и изображение). Оно "обрезает" фон по определенной границе. Эффект заметен при прозрачных или пунктирных границах.

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

div {
    border: 20px dashed red;
    padding: 25px;
    background-image: url(image.jpg);
    background-size: cover;
    background-clip: text;
    /* Добавление префикса -webkit позволяет гарантировать, что свойство будет работать корректно во всех поддерживающих браузерах, включая старые версии Chrome и Safari. */
    -webkit-background-clip: text;
}
h1 {
    font-size: 100px;
    text-align: center;
    color: rgba(255, 255, 255, 0.1);
}

background-origin (Область позиционирования фона)

Свойство background-origin - определяет , от какой области позиционируется фоновое изображение (свойство background-position). Хотя звучит похоже на background-clip, но они решают разные задачи.

Разница становится заметной, когда у элемента есть padding и border, а фон позиционируется не по умолчанию.

div {
    border: 20px dashed red;
    padding: 25px;
    background-image: url(image.jpg);
    background-size: 400px;
    background-color: #161b22;
    background-repeat: no-repeat;
    background-origin: text;
}

background (Универсальное свойство)

Свойство background является сокращенным (shorthand) и позволяет объединить в одной строке несколько отдельных свойств фона. Это значительно сокращает объем кода и упрощает его чтение. Однако, с большой силой приходит и большая ответственность: важно понимать порядок записи значений, так как браузер интерпретирует их в зависимости от их типа.

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

background: (background-color) (background-image) ( background-repeat) (background-attachment) (background-position) ( / background-size) (background-origin) (background-clip);

div {
    background: #161b22 url(image.jpg) no-repeat scroll center / cover
}