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

Допустим, вам нужно, чтобы у вашего веб-сайта был красный фон. И вы воспользуетесь следующим кодом CSS:

body {
  background: red;
}

И получите такой результат:

После работы над кодом CSS, не связанным с цветом тега body, Вы заметите неожиданные изменения:

Что же случилось? Почему красный цвет так обрезан? Ведь он задан как цвет фона для тега body.

То, что в некоторых ситуациях цвет фона тега body заливает собой весь фон веб-сайта,  — просто странность кода CSS. По-настоящему высота тега body меньше высоты окна браузера. Тег body по высоте равен своему содержимому так же, как блок и другие элементы.

Посмотрите:

Если у тега html не задан фон, фон тега body закроет всю страницу. Но если у тега html фон задан, фон тега body будет вести себя так же, как и любой другой элемент.

Получается, в этой ситуации в какой-то момент тегу html был задан белый цвет фона.

Возможно, вы используете какую-то таблицу стилей для сброса кода CSS, в которой прописывается белый цвет для тега html, чтобы для этой цели не использовалась системная цветовая схема в таких браузерах, как Firefox, Internet Explorer и Opera, например такую, как normalize.css 2.1.1. Вероятно, из-за широкого распространения подобных проблем этот подход уже не используется в большинстве современных версий таблиц стилей для сброса кода CSS.

Чтобы решить эту проблему, просто удалите фон у тега html или перенесите тот цвет, который должен заливать весь фон, тегу html, так как его поведение всегда одинаковое — его цвет фона зальет собой все свободное пространство.

Автор урока Chris Coyier

Перевод — Дежурка

Смотрите также:

• Использование фильтров у фоновых изображений
• Использование связывания объектов
• Создание рамки с трех сторон элемента различными способами