Текст поверх изображения не работает при изменении размера браузера ⇐ Html

[Anonymous]

Фон
Мне нужен был базовый текст поверх изображения для моего веб-сайта. Я сделал это, сначала создав прозрачный черный прямоугольник с помощью функций rgb и rgba. Затем поместил текст поверх него, объявив изображение как «относительное», а текст как «абсолютное».
Проблема
Когда я изменяю размер браузера, текст выходит за пределы изображения вниз направлении.
Это показано в https://jsfiddle.net/Lheg26kw/
Вот html-

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

[img]https://upload.wikimedia.org/wikipedia/commons/0/05/Old-Style_Balinese_Cat.png[/img]

This is text

this is some more text for trial of this problem

Вот CSS:

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

.hero-image{
position: relative;
width: 100%;

}
.hero-text p{
position: absolute;
text-align: center;
bottom: 0px;
top: 0px;
width: 100%;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.4);
padding-top: 80px;
color: white;
font-weight: bolder;
}

.hero-text span{
font-weight: normal;
}

Нужно
Мне нужно, чтобы текст оставался на изображении после изменения размера до минимального размера, например, если доступ к веб-сайту осуществляется через мобильный телефон.

Подробнее здесь: https://stackoverflow.com/questions/340 ... er-resized