Использование фона у тега body
21 февраля 2019 | Опубликовано в css | 1 Комментарий »
В этом уроке мы будем разбираться с тегом 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
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191
30 сентября 2020 в 23:19
111111
Ответить