Рамки и фоны, часть 2 / Размер фона, шаг 1 [2/33]
×

Размер фона, шаг 1 [2/33]

По умолчанию браузер не меняет размеры фонового изображения. Как быть, если нужно задать фону другие ширину и высоту или привязать его размеры к размерам родительского блока?

Для этого существует свойство background-size. Оно принимает в качестве значения два аргумента: первый — это ширина фонового изображения, второй — его высота. Второй аргумент необязательный. Если высота не указывается, то она определяется автоматически в зависимости от ширины и исходных пропорций. По умолчанию оба аргумента равны auto.

Пример:

background-size: auto auto;   /* исходные ширина и высота изображения */
background-size: 100px;       /* ширина 100px, высота пропорциональная */
background-size: 100px 200px; /* ширина 100px, высота 200px */

Давайте проверим, как работает это свойство на практике.

Без классных наклеек и значков сейчас никуда. Заходите к нам в магазин.

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Размер фона, шаг 1</title> <meta charset="utf-8"> <base href="/assets/course88/"> <link href="style.css" rel="stylesheet"> </head> <body> <div class="portrait"></div> </body> </html>
CSS
.portrait { width: 300px; height: 400px; margin: 20px auto; background: url("img/keks.jpg") no-repeat #ffffff; }
HTML Academy

Блоку .portrait задайте размер фона background-size:

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

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

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

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

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