Как создать отзывчивый текст поверх изображения?

Я действительно не уверен, как задать этот вопрос каким-либо другим способом, но я пытаюсь загрузить текст поверх изображения - что само по себе кажется сложной задачей, но у меня это получается, используяэто руководство. К сожалению, учебник немного устарел, и я не могу найти способ динамического изменения как размера шрифта, так и размера диапазона для мобильных устройств, и при этом сохранить текст в правильном месте в верхней части изображения.

При изменении размера окна текст и размер окна не изменяются должным образом (он выходит за пределы изображения).

Я попробовал процентное соотношение, а также другие методы без особой удачи. CSS, который я использую для отображения текста поверх изображения с фоном, можно увидеть ниже.

Как лучше накладывать текст на изображение и как сделать его отзывчивым? Вот что я сейчас пытаюсь использовать для настольных браузеров:

.herotext span {
  position:     absolute;
  top:          80%;
  font-family:  'museo_slab500';
  font-size:    150%;
  color:        #fff;
  padding-left: 20px;
  width:        40%;
  line-height:  35px;
  background:   rgb(0, 0, 0);
  background:   rgba(0, 0, 0, 0.7);
}

У кого-нибудь есть какой-нибудь совет о том, как справиться с этим должным образом в эти дни? Статья, которую я упоминаю выше, написана в 2009 году, и я подозреваю, что это не лучший способ наложения текста.