Фоны, часть 1 / Ещё немного background-position [5/16]
×

Ещё немного background-position [5/16]

Когда фоновое изображение больше блока, то оно обрезается. Управлять тем, какую часть изображения будет видно, также можно с помощью свойства background-position.

Иногда для этого удобно использовать относительные значения (проценты), а иногда абсолютные (пиксели).

Кстати, можно использовать не только положительные, но и отрицательные значения. А также комбинировать пиксели и проценты.


Выполнить задание
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> <br> <div class="block block3"></div> <div class="block block4"></div> </body> </html>
CSS
body { padding: 10px; text-align: center; } .block { display: inline-block; width: 120px; height: 120px; margin: 5px; background-color: #34495e; background-image: url("/assets/course13/logo.png"); background-repeat: no-repeat; border-radius: 5px; box-shadow: 1px 1px 3px #999999; } .block1 { } .block2 { } .block3 { } .block4 { }
HTML Academy

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

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

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

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

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

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