Фон для сайта

Вступление

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

видео

Воспроизвести видео

Фоновый цвет

Начну с самого простого: фоновый цвет. Это самое простое что, можно сделать) нужно всего одно свойство: background-color. Ну и значение его — это цвет. Цвет можно указать разными форматами: ключевые слова (red), hex (#ff0000), hsl (hsl(0, 100%, 50%)), hwb (hwb(0 0% 0%)), rgb (rgb(255, 0, 0)). Как работают эти форматы не буду рассказывать, но тут не без нюанса: что делать если нужен полупрозрачный фон? Практически все цвета поддерживают полупрозрачность, но есть ещё формат rgba (rgba(255, 0, 0, 0.5)). Где именно последний параметр (0.5) указывает на прозрачность.

На самом деле у rgb есть несколько форматов, которые позволяют добавлять прозрачность. Подробнее о цветах можно почитать тут: <color>.

Отдельно стоит сказать про пару ключевых слов: transparent и currentColor

Первое это полностью прозрачный цвет, больше про него и нечего добавить, а вот currentColor это уже более интересное значение цвета:

Ключевое слово currentColor представляет значение свойства элемента color (en-US). Это позволяет использовать значение color для свойств, которые не получают его по умолчанию.

То есть, элементу можно задать фоновый цвет currentColor и он будет такого же цвета, как и текст. А рассмотреть это можно на примере кнопки меню.

<button type="button" class="button">Меню</button>

.button {
  display: flex;
  color: tomato;
  align-items: center;
  border: 0;
  background-color: transparent;
  line-height: 1;
}

.button:hover {
  color: blueviolet;
}

.button::before {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  background-color: currentColor;
  mask-image: url(./img/burger-menu-right-svgrepo-com.svg);
  -webkit-mask-image: url(./img/burger-menu-right-svgrepo-com.svg);
  mask-size: 24px 24px;
  -webkit-mask-size: 24px 24px;
  mask-position: center;
  -webkit-mask-position: center;
}

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

Фоновая картинка

Если нужно добавить фон картинкой, нужно подготовить эту картинку и знать как прописать путь до картинки. Далее добавляем свойство background-image: url(pictyre. png);.

Если фоновая картинка паттерн — то всё ок, а если нам не нужно чтобы картинка повторялась — повтор можно отключить: background-repeat: no-repeat;. У этого свойства есть и другие значения: repeat-x и repeat-y. Эти значения включат повтор картинок либо по оси «x», либо по оси «y». Так же можно повторять картинку, например, по оси «x» таким образом: background-repeat: repeat no-repeat;

У background-repeat есть ещё значение: space.

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

Есть ещё значение round. Это значение работает примерно так же как и space, но может изменять размер фоновых картинок.

Эти два свойства лучше использовать с осторожностью, иногда они работают не очевидно.

В качестве примера можно показать случай со звёздами:

<div class="star star-4"></div>

.star {
  height: 17px;
  width: 105px;
}

.star::before {
  content: '';
  display: block;
  height: 17px;
  background-image: url(./img/star.svg);
  background-repeat: space no-repeat;
  background-size: contain;
}

.star-4::before {
  width: 85px;
}

В этом случае звёзды повторяются только по оси «x», причем не слипаются, а заполняют всё доступное расстояние. background-size: contain; я добавил для того, что бы звезда всегда была вписана в контейнер по высоте.

Стоит немного отойти от темы и сказать про доступность, если вы считаете что такая картинка является контентным изображением. Любой элемент можно сделать картинкой при помощи атрибутов role и aria-label.

Так же, фоновую картинку можно и позиционировать внутри контейнера: background-position. В значении этого свойства можно указать как ключевые слова (top, right, bottom, left), так и единицы измерения (px, em, rem, %...). При этом стоит помнить следующее: если мы задаём позиционирование фоновой картинки так: background-position: 10px 20px; первое значение (10px) смещение по оси «x», а второе (20px) — по оси «y». Если что бы картинка смещалась, к примеру, на 10px относительно правого края, можно прописать свойство так: background-position: right 10px 20px;. Особенно часто это использую при добавлении кастомной стрелки элементу «select».

<select name="name" class="select">
  <option>пример</option>
</select>

.select {
  appearance: none;
  background-image: url(./img/select.svg);
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

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

<div class="bg">
  <pre>
Щипцами брюки разлохмачу,
Гребёнкой волосы взъерошу.
Эффектно ожидать удачу
До самой смерти я не брошу!
  </pre>
</div>

.bg {
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background-image: url(./img/bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #131112;
  color: #ffffff;
  padding: 20px;
}

Щипцами брюки разлохмачу,
Гребёнкой волосы взъерошу.
Эффектно ожидать удачу
До самой смерти я не брошу!

В инспекторе можете убрать фоновую картинку, чтобы увидеть работу такого подхода.

Со свойством background-image часто добавляется ещё и background-size. Принимает в качестве значения как ключевые слова (contain, cover...) так и более точные размеры (px, %...). Contain вписывает картинку в блок, оставляя пустые места, а cover полностью заливает картинкой всю доступную область. Особенно удобно использовать ключевые слова когда размеры блока могут меняться.

На самом деле background-image может принимать не только url картинок, но и, к примеру, градиенты. Подробнее можно почитать тут

Так же background-image может принимать несколько картинок.

Прописать несколько картинок проще простого: background-image: url(./img/frame.png), url(./img/rabbit.jpg);

<div class="rabbit"></div>

.rabbit {
  width: 280px;
  height: 280px;
  background-image: url(./img/frame.png), url(./img/rabbit.jpg);
  background-size: contain, cover;
  background-position: center;
  background-repeat: no-repeat;
}

Не стоит забывать про порядок фоновых картинок и порядок значений других свойств.

background-size: contain, cover; означает что первая картинка (рамка) будет вписана в размер блока, а вторая зальёт собой всё доступное пространство.

background-position: center; и background-repeat: no-repeat; будет одинаковым для двух фоновых картинок.

Фон у border и не только

Допустим у нас есть такая кнопка:

<button type="button" class="clip">Кнопка</button>

.clip {
  appearance: none;
  padding: 2px 4px;
  background-color: #ff6347;
  color: #000000;
  border: 3px solid rgba(255, 99, 71, 0.5);
  font-family: inherit;
  font-size: inherit;
}

На первый взгляд всё хорошо, но в стилях border прописан с прозрачностью, то есть он должен быть светлее. Но почему он сливается с общим фоном? По тому что фоновый цвет кнопки так же заливает и border. Исправить такую ситуацию поможет background-clip. В нашем случае background-clip: padding-box; Есть и другие значения этого свойства.

.clip {
  appearance: none;
  padding: 2px 4px;
  background-color: #ff6347;
  background-clip: padding-box;
  color: #000000;
  border: 3px solid rgba(255, 99, 71, 0.5);
  font-family: inherit;
  font-size: inherit;
}

Анимация фона

background анимируется плохо, но можно анимировать background-position и background-color. Первый пример можно посмотреть на главной странице этого же сайта, там «плывут» облака, ну а анимация фонового цвета — практически любая кнопка на этой же странице.

Короткая запись

В своих примерах, в этой статье, я всегда прописываю несколько свойств, но можно практически всё прописать и в одну строку: background: #131112 url(./img/bg.jpg) no-repeat center; Как правило я не использую такой подход, и в этом есть причина: стоит этому же элементу поменять одно из свойств, например при адаптивной вёрстке, то все остальные могут сломаться... Более того, когда все свойства прописаны отдельно, код более удобен для разработки.

Итог

Фон это не только одна строка кода с фоновым цветом или картинкой. Это набор правил позволяющий гибко настроить фон без дополнительных html элементов. Осталось только правильно прописать пути до картинок, о чём у меня есть видео.