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

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

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

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

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

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

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

Хотите писать JavaScript, используя современный синтаксис (ES2015, ES2016, ES2017)? Уметь тестировать свои программы? Записывайтесь на продвинутый интенсив по JavaScript.

Выполнить задание
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, уровень 2 #15, который стартует 24 сентября.

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

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

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

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