В этой части поработаем над графическими элементами макета. В части «Кексби. Ссылки и изображения» мы добавили в разметку содержательные изображения, а теперь добавим декоративные.

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

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

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

Итак, сначала давайте зададим фоновое изображение шапки. Для шапки и подвала у нас уже есть свой цвет фона background-color: #363636, одновременно с ним мы зададим фоновую картинку. Хоть картинка и перекроет полностью фоновый цвет, удалять его не стоит. В случае, если картинка будет медленно грузиться или если она вообще не загрузится, цвет текста и фоновый цвет блока всё равно останутся контрастными и поэтому текст будет возможно прочитать.

А ещё, помимо уже знакомых вам из части «Фоны. Знакомство» тренажёра «Продвинутый HTML и CSS» свойств для работы с фонами, в этом задании мы применим свойство background-size со значением cover.

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

Подробно это свойство разбирается в части «Рамки и фоны. Погружение» тренажёра «Сборник: Тонкости CSS» по подписке.