Как background ведёт себя у элементов без контента?

Поведение background напрямую связано с тем, имеет ли элемент физические размеры.

Основной принцип

Фон отрисовывается внутри box-модели элемента:

• content

• padding

• border

Если content отсутствует и размеры равны нулю, фон не отображается.

Блочные элементы без контента

Если у div:

• нет текста

• не задан height

• отсутствует padding

то его высота равна нулю, и background визуально не виден.

Как сделать background видимым

Фон можно отобразить, если:

• задать height или min-height

• добавить padding

• добавить border

• поместить внутрь контент

Inline-элементы

У строчных элементов фон рисуется вокруг текста и padding, даже если контента мало.

Краткий вывод

Background отображается только в пределах размеров элемента, поэтому без контента или размеров фон может быть невидим.