CSS-свойство background

5 мая 2023

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

background также объединяет в себе несколько других свойств:

background-color — задаёт цвет фона элемента;
background-image — устанавливает фоновое изображение для элемента;
background-position — определяет начальную позицию фонового изображения;
background-repeat — указывает, должно ли фоновое изображение повторяться;
background-size — устанавливает размер фонового изображения;
background-attachment — определяет, будет ли фоновое изображение прокручиваться вместе с содержимым элемента.

👉 Свойство поддерживается современными браузерами. Актуальная информация — на caniuse.com.

Синтаксис

selector {
  background: [значение];
}

Значения и примеры использования

Background-color

Свойство background-color задаёт цвет фона элемента. Значение задаётся в виде hex-кодов, RGB-функций или названий цветов:

background-color: #FFA500; /* Устанавливает оранжевый цвет фона с помощью hex-кода */
background-color: rgb(255, 0, 0); /* Устанавливает красный цвет фона с помощью RGB-значения */
background-color: rgba(255, 0, 0, 0.5); /* Устанавливает полупрозрачный красный фон с помощью RGBA-
значения */
background-color: white; /* Устанавливает цвет фона с помощью ключевого слова */
background-color: transparent; /* Устанавливает прозрачный фон элемента */
background-color: inherit; /* Наследует значение цвета фона от родительского элемента */

.options {
  background-color: #DA70D6;
}

Background-image

Свойство background-image позволяет задать изображение в качестве фона элемента. Это может быть любой тип изображения, включая jpeg, png, gif, svg и другие. Значение этого свойства указывается в формате URL, который ссылается на изображение.

.image-section {
    height: 300px;
    background-image: url("./images/nunzio-guerrera-uWZL-6wsUt4-unsplash.jpg");
    background-size: cover;
    background-position: center;
}

Также есть возможность использовать несколько изображений для фона. Для этого нужно указать несколько значений url() через запятую. При этом каждое изображение будет располагаться друг над другом, начиная с первого указанного значения.

Background-repeat

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

background-repeat может принимать следующие значения:

repeat — изображение будет повторяться как по горизонтали, так и по вертикали (это значение является значением по умолчанию).
repeat-x — изображение повторяется только по горизонтали.
repeat-y — изображение повторяется только по вертикали.
no-repeat — изображение будет отображаться только один раз.

section {
    height: 200px;
    background-image: url("./images/jean-philippe-delberghe-75xPHEQBmvA-unsplash.jpg");
    background-repeat: repeat;
    color: #070707;
}

Background-position

Свойство background-position устанавливает позицию фона. Задаётся в процентах или пикселях относительно верхнего левого угла элемента. Чтобы выровнять центральную часть фонового изображения по центру элемента, можно использовать значение 50% 50%, где первое значение указывает позицию по горизонтали, а второе по вертикали.

.position {
    background-image: url("./images/daniel-shapiro-Ljm80tZkVLc-unsplash.jpg");
    background-size: cover;
    background-position: 50% 50%;
    padding: 50px;
    color: #ffffff;
}

Background-size

Свойство background-size позволяет установить размеры фонового изображения. Значение может быть указано в пикселях, процентах, которые рассчитываются от размера элемента, или любых других доступных для CSS единицах измерения. Также можно указать ключевое слово:

auto — значение по умолчанию и оно указывает на то, что размер фонового изображения должен быть равен его исходному размеру.
cover — фоновое изображение будет растянуто по всей ширине и высоте элемента, что приведет к обрезанию изображения, если его размеры не соответствуют размерам элемента. При этом гарантируется, что весь элемент будет полностью заполнен изображением.

.image-section {
    height: 300px;
    background-image: url("./images/kim-rivers-kirby-3XoXjLyDN1o-unsplash.jpg");
    background-size: cover;
    background-position: center;
}

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

.image-section {
    height: 300px;
    background-image: url("./images/kim-rivers-kirby-3XoXjLyDN1o-unsplash.jpg");
    background-size: contain;
    background-position: center;
}

Background-attachment

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

Значения свойства:

scroll — фоновое изображение прокручивается вместе с элементом, как обычный фон.
fixed — фоновое изображение остается на месте, когда элемент прокручивается.
local — фоновое изображение фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон, выходящий за рамки элемента, остаётся на месте.

.image-section {
    height: 300px;
    background-image: url("./images/kim-rivers-kirby-3XoXjLyDN1o-unsplash.jpg");
    background-size: contain;
    background-attachment: fixed;
}

Нюансы

Если одновременно установлены background-color и background-image, то background-image будет отображаться поверх цвета фона.
Если установлен background-attachment: fixed, то позиционирование фона осуществляется относительно окна браузера, а не относительно элемента, на который установлен фон.

.image-section {
    height: 300px;
    background-image: url("./images/kim-rivers-kirby-3XoXjLyDN1o-unsplash.jpg");
    background-size: cover;
    background-position: 50% 50%;
    background-attachment: fixed;
}