Почему div-блок с фоном отображается на холсте, но не отображается на опубликованном сайте

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

Смотрите видео:

Причина проблемы

Добавим в секцию новый div-блок и зададим ему фон. Блок нормально отображается в редакторе.

Но на предварительном просмотре или при публикации проекта блока не видно.

Причина в том, что пустой div-блок не имеет заданной высоты — по умолчанию у него стоит высота auto. Это значит, что высота блока подстраивается под его содержимое. Но поскольку в div-блоке нет контента, то фактическая высота получается равной нулю — следовательно он не отображается.

Почему тогда мы видим div-блок в редакторе?

Это сделано для удобства пользователей — чтобы визуально видеть, где находится блок, и чтобы было проще добавлять в него другие элементы. Пустой div-блок (а также секция или контейнер) при отображении на холсте имеет небольшую высоту, хотя на самом деле в параметрах она не задана.

Как решить проблему

Есть два способа сделать так, чтобы блоки отображались на опубликованном сайте:

Добавить внутрь блока какой-либо контент — например, текст или изображение.

Задать блоку минимальную высоту.

Резюме

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