Для того чтобы задать фоновое изображение на шапку и блок ниже, вам понадобится использовать CSS. HTML служит для создания структуры страницы, а CSS позволяет задавать стили и внешний вид элементов.
1. Сначала вам нужно создать HTML-структуру вашей страницы. Задайте контейнер для шапки и блока ниже, например, используя элементы div:
<div class="header"></div> <div class="content"></div>
2. Далее, в CSS-файле, подключенном к вашему HTML, определите стили для шапки и блока ниже.
.header {
background-image: url("путь_к_изображению"); /* Замените путь_к_изображению на актуальный путь к вашему изображению */
background-size: cover; /* Задает размер фонового изображения */
background-position: center; /* Задает позицию фонового изображения */
height: 200px; /* Задайте желаемую высоту шапки */
}
.content {
background-color: #f5f5f5; /* Задайте цвет фона блока ниже */
height: 500px; /* Задайте желаемую высоту блока */
}
3. Вместо "путь_к_изображению" в свойстве background-image укажите путь к вашему фоновому изображению. Можно использовать относительный путь относительно вашего CSS-файла или полный путь к изображению.
4. Если вы хотите, чтобы фоновое изображение было растянуто на всю ширину и высоту шапки, используйте свойство background-size со значением cover. Если вы хотите, чтобы изображение не растягивалось и помещалось целиком в шапку, используйте свойство background-size со значением contain.
5. Свойство background-position задает начальное положение фонового изображения. Значение center центрирует изображение по ширине и высоте контейнера.
6. Вместо цвета фона можете использовать изображение, также как в шапке. Просто задайте другое свойство background-image для .content.
Таким образом, вы сможете задать фоновое изображение для шапки и блока ниже с помощью CSS. Не забудьте указать путь к изображению и настроить остальные стили по вашим требованиям.