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

Свойство background-repeat [3/16]

По умолчанию фоновое изображение повторяется. Это хорошо заметно, когда оно меньше блока. Управлять этим поведением можно с помощью CSS-свойства background-repeat. У свойства 4 значения:

  • repeat — повторять во всех направлениях. Это значение по умолчанию.
  • repeat-x — повторять только по горизонтали.
  • repeat-y — повторять только по вертикали.
  • no-repeat — не повторять.
Хотите стать профессионалом в вёрстке? Тогда записывайтесь на наш интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Свойство background-repeat</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; background-image: url("/assets/course13/cat_box.png"); } .block2 { background-color: #3498db; background-image: url("/assets/course13/cat_fish.png"); } .block3 { background-color: #e74c3c; background-image: url("/assets/course13/cat_drunk.png"); } .block4 { background-color: #e67e22; background-image: url("/assets/course13/cat_tied.png"); background-repeat: no-repeat; }
HTML Academy

Задайте блокам режим повторения фона:

  1. по горизонтали — 1 блоку,
  2. по вертикали — 2 блоку,
  3. без повторения — 3 блоку,
  4. во все стороны  — 4 блоку.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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