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

Свойство background-position [4/16]

Cвойство background-position управляет расположением фонового изображения. Значение свойства состоит из двух частей, разделенных пробелом: x y.

x задаёт расположение по горизонтали, а y по вертикали.

В качестве значения x можно использовать ключевые слова left, center, right, значения в процентах и в пикселях.

В качестве значения y можно использовать ключевые слова top, center, bottom, значения в процентах и в пикселях.

Примеры использования свойства:

background-position: 50% 50%;
background-position: right bottom;
background-position: 50px 100px;
background-position: 0 100%;
background-position: left bottom;

Так сработают примеры:

  1. картинка будет по центру;
  2. правый нижний угол;
  3. отступ 50px от левого края и 100px от верхнего;
  4. левый нижний угол;
  5. левый нижний угол.

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

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

  1. 50% 50% — 1 блоку,
  2. 100% 0 — 2 блоку,
  3. 0 100% — 3 блоку,
  4. 100% 100% — 4 блоку.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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