Добавление фонового изображения в верхнюю часть HTML-страницы

23 октября, 2020 11:50 дп 257 views | Комментариев нет

| | Комментировать запись

Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью 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: ,

Добавить комментарий