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

Свойство background [7/16]

Фон элемента можно задавать с помощью отдельных свойств: background-color, background-image и т.д. Получается довольно громоздкая запись.

Также задать фон можно с помощью сокращенного свойства background, в котором через пробел перечисляются его компоненты:

background: [bc] [bi] [br] [bp] [ba];
/* Обозначения:
[bc] — background-color
[bi] — background-image
[br] — background-repeat
[bp] — background-position
[ba] — background-attachment
*/

Если какой-то компонент не указан, то берется значение по умолчанию. Ниже примеры.

background: #e74c3c;
background: url("img.png") no-repeat;
background: url("img.png") 10px 20px;

В первом примере просто задан цвет фона.

Во втором примере задано не повторяющееся фоновое изображение, а также по умолчанию прозрачный цвет фона, расположение в левом верхнем углу.

В третьем примере задано фоновое изображение и его расположение, а также по умолчанию прозрачный цвет фона и режим повторения во все стороны.

Хотите стать профессионалом в вёрстке? Тогда записывайтесь на наш интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Свойство background</title> </head> <body> <div class="block block1"> Гипнокот </div> <div class="block block2"> Рыбокот </div> </body> </html>
CSS
body { padding: 20px; font-size: 20px; font-family: "Tahoma", sans-serif; } .block { width: 140px; margin: 25px auto; padding: 25px 0; padding-left: 90px; color: white; border-radius: 5px; box-shadow: 1px 1px 3px #999999; } .block1 { background: none; } .block2 { background: none; }
HTML Academy
  1. Задайте 1 блоку фон: цвет фона #e74c3c, картинка /assets/course13/cat_eyes.png, без повторения, расположение картинки 10px слева и 5px сверху.
  2. Задайте 2 блоку фон: цвет фона #2980b9, картинка /assets/course13/cat_fish.png, без повторения, расположение картинки 10px слева и 5px сверху.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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