Добавление фонового изображения в верхнюю часть HTML-страницы
Development | Комментировать запись
Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью HTML, стандартного языка разметки, используемого для отображения документов в браузере. Для работы с этими мануалами не требуется предварительный опыт программирования.
В результате выполнения этой серии у вас будет веб-сайт, готовый к развертыванию в облаке, также вы получите базовые знания HTML. Умение писать HTML – хорошая основа для изучения более сложных аспектов веб-разработки, таких как CSS и JavaScript.
Примечание: Найти все мануалы этой серии можно по тегу html-practice.
В этом мануале мы покажем, как с помощью контейнера <div> структурировать верхнюю часть веб-страницы. Мы будем использовать атрибут style, чтобы задать высоту контейнера <div>, применить фоновое изображение и указать, что оно должно покрывать всю область контейнера.
Прежде чем мы начнем, нам нужно выбрать фоновое изображение.
Читайте также: Добавление изображения на веб-страницу с помощью HTML
Выбранную картинку сохраните в папке images как background-image.jpg.
Затем вставьте выделенный фрагмент кода в файл index.html между открывающим и закрывающим тегом </body>:
<body>
<!--First section-->
<div style="background-image: url('Image_Location');
background-size: cover; height:480px; padding-top:80px;">
</div>
</body>
...
Не забудьте заменить Image_Location расположением вашей фоновой картинки и добавить закрывающий тег </div>. У нас получилось вот что:
Обратите внимание, мы добавили комментарий <!–First section–>, чтобы упорядочить наш HTML-код. Комментарий – это фрагмент кода, который игнорируется браузерами. Комментарии помогают разработчикам объяснить или упорядочить код. Они создаются с помощью открывающего тега <!– и закрывающего тега –>.
Мы задали высоту (height) в 480 пикселей и padding-top в 80 пикселей, благодаря чему между верхней частью элемента <div> и любым контентом внутри останется 80 пикселей пространства. Обратите внимание: вы не сможете увидеть padding-top в действии, пока мы не разместим контент внутри элемента <div>.
Сохраните файл и перезагрузите его в браузере.
В качестве фона вместо изображения можно использовать цвет. Чтобы задать цвет фона, замените только что добавленный фрагмент кода в <div> следующим кодом:
. . .
<body>
<!--First section-->
<div style="background-color: #00BFFF; height:480px; padding-top:80px;">
</div>
</body>
...
Сохраните файл и перезагрузите его в браузере, чтобы проверить результат. Фоновое изображение исчезнет, вместо него будет контейнер того же размера, но сплошного синего цвета. Остановимся на этом варианте.
Возможно, вы заметили, что контейнер <div> на вашей веб-странице окружен небольшим промежутком белого пространства. Такое небольшое поле устанавливается автоматически для всех HTML-страниц.
Чтобы удалить его, нужно добавить атрибут style к открывающему тегу <body>, который устанавливает поле элемента <body> в 0 пикселей. Найдите открывающий <body> в файле index.html и замените его строкой:
<body style = «margin: 0;»>
Сохраните и перезагрузите файл в браузере. Теперь вокруг верхнего контейнера <div> не должно быть белого поля.
Теперь вы умеете добавлять контейнер <div> с фоновым изображением в верхнюю часть веб-страницы.
Tags: HTML, HTML-practice