Как установить фон в CSS. Cвойство background

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

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

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

Синтаксис

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/image.jpg");
  background-repeat: repeat;
  color: #070707;
}

Background-position

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

.position {
  background-image: url("./images/image.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/image.jpg");
  background-size: cover;
  background-position: center;
}

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

.image-section {
  height: 300px;
  background-image: url("./images/image.jpg");
  background-size: contain;
  background-position: center;
}

Background-attachment

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

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

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

.image-section {
  height: 300px;
  background-image: url("./images/image.jpg");
  background-size: contain;
  background-attachment: fixed;
}

Нюансы

Если одновременно установлены background-color и background-image, то background-image будет отображаться поверх цвета фона.

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

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

Если значение background-size указано в процентах, то размер изображения будет задаваться относительно размера элемента.

Материалы по теме

• Полупрозрачный градиент над картинкой на чистом CSS
• Специфичность селекторов в CSS
• Обзор цветовых форматов в CSS

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.