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;
}

- Если значение
background-size
указано в процентах, то размер изображения будет задаваться относительно размера элемента.
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

Как создать рамку вокруг элемента. CSS-свойство border
Цветные, точечные, пунктирные рамки и многое другое.
- 31 мая 2023

Как сделать анимацию любой сложности. Свойство animation
Примеры и нюансы использования.
- 29 мая 2023

Как создать тени на CSS: свойство box-shadow
Внутренние, внешние, с градиентом — на все случаи жизни.
- 28 мая 2023

Как установить стиль шрифта. CSS-свойство font
Семейства шрифтов, начертание и размеры.
- 27 мая 2023

Как работает transform в CSS на примерах
Интерактивная статья — попробуйте анимировать сами.
- 23 мая 2023

Как оформить текст: 11 главных CSS-свойств
Инструкция для любителей поиграться со шрифтами.
- 23 мая 2023




Как создать сетки на CSS Grid Layout
Чтобы сайт был красивым, а вёрстка не ломалась.
- 17 мая 2023