• Теория
  • Теория

Множественный фон

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

background-image: url("image-1.png"), url("image-2.png");

При этом выше будет то изображение, которое находится раньше в списке: image-1.png в примере будет выше image-2.png.

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

/* для первой картинки масштабирование contain, для второй — 100px */
background-size: contain, 100px;

/* для первой картинки позиционирование top, для второй — 100% */
background-position: top, 100%;

Давайте Кексу на портрете добавим модные очки с помощью второго фонового изображения.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

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