Невозможно получить изображение героя/фонового изображения на полную высоту ⇐ Html

[Anonymous]

Сводка: Я пытаюсь заставить это изображение, чтобы полностью показать изображение героя. Редактируйте для разъяснения: я хочу, чтобы непредопределенная версия изображения заняла приблизительно 1/4 полного экрана. Я хочу, чтобы текст лежал на верхней части изображения в левую сторону середины изображения. относительно изображения.
то, что не работает. (Это обрезано) < /p>
Что я пробовал: я пытался использовать пиксели против %. Я пытался использовать фиксированную позицию против родственника. Я пробовал масштабировать изображение (перед загрузкой) < /p>
html code: < /p>


body,
html {
height: 100%;
margin: 0;
}

.hero-image {
background-image: url("https://www.posweyb.net/DurerChurchWoman.jpg");
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 10%;
transform: translate(-50%, -50%);
color: #733b0b;
}< /code>


Posweyb
Blätter des Posweb

< /code>
< /div>
< /div>
< /p>
enter code here


Подробнее здесь: https://stackoverflow.com/questions/794 ... ull-height