• Теория
  • Теория

Свойство background

Фон элемента можно задавать с помощью отдельных свойств: 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;

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

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

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

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. Цена 22 900 ₽

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Фоны. Знакомство» тренажёра «Базовые механики стилизации» можно после регистрации и оформления подписки.