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

Свойство background-attachment [6/16]

Обычно фоновое изображение прокручивается вместе с содержимым блока. Это хорошо видно в мини-браузере. Прокрутите окно вниз и увидите, что фон поднимется наверх.

С помощью свойства background-attachment можно зафиксировать фон на месте и он не будет перемещаться при прокручивании.

Значение свойства:

  • scroll — фон прокручивается вместе с содержимым. Это значение по умолчанию.
  • fixed — фон не прокручивается, зафиксирован на одном месте.

Это тот случай, когда легче показать, чем объяснять: выполняйте задание и смотрите, как изменяется поведение фона при прокрутке.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Свойство background-attachment</title> </head> <body> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> </body> </html>
CSS
body { background-color: black; background-image: url("/assets/course13/moon.jpg"); background-position: 50% 0; background-repeat: no-repeat; } .block { width: 192px; height: 256px; margin: 20px auto; background-color: #34495e; background-repeat: no-repeat; background-position: 50% 50%; border-radius: 5px; } .block:nth-child(1) { background-image: url("/assets/course13/cat_clean.png"); } .block:nth-child(2) { background-image: url("/assets/course13/cat_fight.png"); } .block:nth-child(3) { background-image: url("/assets/course13/cat_hiss.png"); } .block:nth-child(4) { background-image: url("/assets/course13/cat_poo.png"); }
HTML Academy
  1. Задайте для body «неподвижный» режим фонового изображения.

Проверьте, как ведёт себя фоновое изображение, прокручивая окно мини-браузера.

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

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

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

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

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