Адаптивная фон и проблема перекрытия изображений ⇐ Html

[Anonymous]

Я пытаюсь сохранить фоновый раздел, и изображение выровнен вместе. На моей веб -странице у меня есть синий фон с изображением, расположенным сверху, которое слегка перекрывается под фоном. На рабочем столе он выглядит нормально, но когда я изменяю размер браузера, изображение меняется вверх, потому что фон имеет фиксированную высоту. Я хочу, чтобы изображение оставалось расположенным под фоном (так же, как оно выглядит на рабочем столе), даже если браузер изменен размер для адаптивного тестирования. Я пытаюсь воссоздать поведение, наблюдаемое здесь: https://www.whitehouse.gov/administrati ... d-j-trump/. Вот мой код-< /p>

Код: Выделить всё

.hero-section {
background: #112E51;   /* blue background */
color: #fff;
height:10rem;
text-align: center;
padding: 2rem 0 6rem;  /* extra bottom padding for space */
position: relative;
}

/* portrait image pulled down */
.portrait {
margin: -8rem auto 0;   /* negative top margin pulls image down */
width: 100%;
max-width: 800px;       /* optional: control width */
position: relative;
z-index: 2;
}

.portrait img {
display: block;
width: 100%;
height: auto;
}< /code>

ABCD

fggfgf






[img]https://www.gardenia.net/wp-content/uploads/2023/05/types-of-flowers-780x520.webp[/img]

This is my caption how does it look

Подробнее здесь: https://stackoverflow.com/questions/797 ... rlap-issue