Фоны, часть 1 / Свойство background-image [2/16]
×

Свойство background-image [2/16]

Фоновое изображение можно задать с помощью CSS-свойства background-image. Делается это так:

selector {
    background-image: url("адрес-картинки");
}

Адрес картинки обязательно заключается внутрь url("..."). Адреса фоновых картинок такие же, как и адреса обычных картинок, которые вы задавали в курсе про ссылки и изображения.

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

В этом курсе мы в качестве подопытных картинок будем использовать отличные иконки Дениса Сажина.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Свойство background-image</title> </head> <body> <div class="block block1"></div> <div class="block block2"></div> <div class="block block3"></div> <div class="block block4"></div> </body> </html>
CSS
body { padding: 10px; text-align: center; } .block { display: inline-block; width: 192px; height: 192px; margin: 5px; border-radius: 5px; box-shadow: 1px 1px 3px #999999; } .block1 { background-color: #2ecc71; } .block2 { background-color: #3498db; } .block3 { background-color: #e74c3c; } .block4 { background-color: #e67e22; }
HTML Academy

Добавьте блокам фоновые картинки:

  1. /assets/course13/cat_box.png — 1 блоку,
  2. /assets/course13/cat_fish.png — 2 блоку,
  3. /assets/course13/cat_drunk.png — 3 блоку,
  4. /assets/course13/cat_tied.png — 4 блоку.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.