Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Фон Основы вёрстки контента

Верстальщик довольно часто сталкивается с необходимостью стилизовать не только конкретные элементы, такие как таблицы, списки, текст, медиаэлементы, формы. Порой нужно также стилизовать и блоки, внутри которых они находятся. На сайтах встречаются фоновые изображения, градиенты, цветовые подложки. Для их создания используется свойство background, которое может применяться как ко всей странице, так и к небольшим блокам.

Свойство background является обобщённым для 8 свойств:

  • background-attachment
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size

Важно: стоит ещё раз вспомнить, что обобщённые свойства сбрасывают все предыдущие связанные свойства. Это важно, так как у вас уже могут быть установлены фоновые изображения, их позиционирование и размеры. Если добавить цвет с помощью свойства background в таком блоке, то прошлые свойства будут сброшены до значений по умолчанию.

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


Установка цвета или изображения

Базовой функцией свойства background является установка фонового цвета или фонового изображения. Для этого используются свойства:

  • background-color — установка фонового цвета
  • background-image — установка фонового изображения или градиента

Для установки цвета может использоваться различная запись: шестнадцатеричная; с помощью функций rgb(), hsl() и других. В конце урока будет оставлена ссылка на сайт, где можно выбрать любой цвет и получить его код для установки в качестве значения свойства background-color

Обратим внимание, что фон может быть установлен как для всей страницы, так и для отдельных её частей. Например, для выделения слова в предложении. В реальных проектах будут встречаться именно такие, «точечные» установки фона, особенно при использовании градиентов.

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

В качестве значения background-image принимает функцию url(). Похожий принцип используется при подключении шрифтов на страницу.

Может показаться, что результат такой же, как и при использовании тега <img />. Однако есть важное отличие: при использовании background-image изображение не находится в HTML и не участвует в формировании размеров блоков.

В примере выше для блока с классом image установлено не только изображение, но и заданы размеры с помощью свойств width и height. Без них изображение пропадёт со страницы, так как, фактически, блок будет являться пустым.

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

Особенность использования background-image заключается в возможности задать сразу несколько фоновых изображений. Для этого достаточно указать их через запятую:

background-image:
  url('path_to_image_1'),
  url('path_to_image_2');

Используя такой способ можно накладывать одни изображения на другие. Выводиться они будут в том порядке, в котором указаны внутри свойства — первое изображение будет выше второго, второе выше третьего и так далее.

При использовании фонового изображения возможна ситуация, когда блок, к которому применено свойство, больше изображения по высоте или ширине. В такой ситуации браузеры «копируют» фон, чтобы заполнить им всё доступное пространство.

CSS позволяет управлять тем, будет ли браузер клонировать изображение, и, если да, то по какому направлению. За это отвечает свойство background-repeat. Оно принимает одно из следующих значений:

  • repeat — Значение по умолчанию. Копировать изображение по всем направлениям, пока это позволяет пространство
  • repeat-x — Копировать только по горизонтали
  • repeat-y — Копировать только по вертикали
  • no-repeat — Не копировать
  • round — Копировать с возможностью сжатия, чтобы уместить максимальное количество копий. Это значение используется редко, так как приводит к деформации изображения
  • space — Копировать максимальное количество изображений без их обрезки. В начале копии располагаются в крайних точках, а потом равномерно располагаются в остальных частях блока. При этом возможны пробелы между копиями

Размер изображения

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

Однако не всегда мы можем угадать, какого размера нужно изображение. Это зависит от множества факторов, например:

  • Разрешение экрана пользователя
  • Адаптивность проекта
  • Интерактивность, когда пользователь может взаимодействовать со страницей и от этого меняются некоторые её части

При таких условиях может понадобиться одно изображение, которое, в то же время, будет подстраиваться по размеру под «реалии» страницы. Для этого существует свойство background-size, которое принимает два значения:

  • Ширина изображения
  • Высота изображения

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

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

Свойство background-size имеет два зарезервированных значения:

  • cover — Изображение масштабируется так, чтобы занять весь блок. В этом случае изображение может быть обрезано
  • contain — Изображение масштабируется так, чтобы максимально покрыть область блока, но не обрезать само изображение

Такие значения можно встретить при создании верхних секций на сайте, где есть фоновое изображение на всю ширину экрана


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


Ещё одно свойство, которое влияет на размер изображения — background-origin. Его действие похоже на свойство box-sizing, которое отвечает за то, как браузер обрабатывает внутренние отступы и границы блока.

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

  • border-box — фоновое изображение рисуется на всём блоке, включая внутренние отступы и границы
  • padding-box — значение по умолчанию. Фоновое изображение рисуется в области блока и его внутренних отступов, но не учитывается размер границ, заданных свойством border
  • content-box — фоновое изображение рисуется не по всему блоку, а по области контента внутри него

Взглянем на пример:

Видно, что изображения всё равно накладываются на границы, например при значении padding-box, хотя ожидался другой эффект. Этот выход на границы связан с тем, что браузер не обрезает изображения, а граница не является сплошной.

Здесь поможет свойство background-clip, задача которого - точно определить, как обрезать изображение при его выходе за пределы блока. Как и background-origin, свойство принимает одно из трёх значений:

  • border-box — обрезать по внешним границам элемента
  • padding-box — обрезать по границам внутренних отступов
  • content-box — обрезать по границам контента

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


Важно: свойство background-clip влияет не только на фоновое изображение, но и на фоновый цвет, установленный с помощью свойства background-color


Позиционирование фонового изображения

Осталось два свойства из набора свойства background. Это:

  • background-position — позиционирование/расположение фона внутри блока
  • background-attachment — прокрутка фона вместе с контентом

По умолчанию все изображения появляются относительно левого верхнего угла блока, но зачастую изображение нужно расположить в другой точке. Для этого используется свойство background-position. Его синтаксис достаточно запутанный, поэтому начать стоит с предустановленных значений, которые покрывают существенную часть задач:

  • top — расположить фон в центре и прижать к верхнему краю
  • left — расположить фон в центре и прижать к левому краю
  • right — расположить фон в центре и прижать к правому краю
  • bottom — расположить фон в центре и прижать к нижнему краю
  • center — расположить фон в центре

Такое же поведение можно задать, используя значения для координат x и y. Например, чтобы воспроизвести поведение значения top, нужно по оси x указать значение в 50%, а для оси y значение 0. В качестве единиц измерения можно использовать любые ранее изученные единицы: px, em, % и так далее.

.bg {
  /* Эквивалентно background-position: top */
  background-position: 50% 0;
}

Также в качестве значений для осей x и y можно указывать уже изученные ключевые слова: top, right, bottom, left и center. Это помогает сделать CSS более выразительным и читаемым.

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

Свойство background-attachment позволяет контролировать такое поведение. Для этого устанавливается одно из значений:

  • scroll — значение по умолчанию. Фоновое изображение располагается в соответствии со свойством background-position. При этом оно фиксируется в области и не пропадает при скролле контента
  • fixed. У этого значения есть хитрость: позиционирование происходит не относительно блока, где было установлено свойство background, а относительно всей страницы целиком. Однако видимо оно будет только в рамках того блока, где был установлен фон. Такое поведение иногда неочевидно, поэтому значение используется редко
  • local — изображение фиксируется в определённой точке относительно контента. В примере ниже таким контентом является текст, поэтому фоновое изображение находится ровно по его центру, так как свойство background-position имеет значение center

Порядок записи свойств в background

После изучения всех доступных свойств осталось узнать о том, в каком порядке они записываются в обобщённом правиле background и какие свойства обязательны.

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

Обязательное требование к записи — совместная запись свойств background-position и background-size. Для их записи используется символ / и позиционирование обязательно стоит до размеров. Вот как это выглядит в реальном CSS файле:

.element {
  background: url("../assets/images/hexlet.png") center / 0.5rem no-repeat #288cff
}

В этой записи установлены следующие свойства:

  • background-image: url("../assets/images/hexlet.png")
  • background-position: center
  • background-size: 0.5rem
  • background-repeat: no-repeat
  • background-color: #288cff

Все свойства, которые не указаны, будут приведены в значение по умолчанию, что удобно при создании своих собственных компонентов.

В этом уроке мы познакомились со свойствами, составляющими обобщённое свойство background:

  • background-attachment
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size

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

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


Дополнительные материалы

  1. HTML COLOR CODES

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
30 июня 10 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
30 июня 16 месяцев

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»