Eu realmente não sei como colocar essa questão de outra maneira, mas estou tentando carregar o texto em cima de uma imagem - o que parece ser uma tarefa complicada em si, mas eu tenho que usaristo tutorial. Infelizmente, o tutorial está um pouco desatualizado e não consigo descobrir uma maneira de alterar dinamicamente o tamanho da fonte e o tamanho do intervalo para dispositivos móveis e ainda manter o texto no local correto na parte superior da imagem.

Quando a janela é redimensionada, o texto e a caixa não são redimensionados adequadamente (ela transborda para fora da imagem).

Eu tentei dimensionamento de porcentagem, bem como outras técnicas com pouca sorte. O CSS que estou usando para exibir o texto sobre a imagem com um fundo pode ser visto abaixo.

Qual é a melhor prática para sobrepor texto em uma imagem e como alguém poderia fazer com que ela seja responsiva? Isso é o que eu estou tentando usar para navegadores de desktop agora:

.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);
}

Alguém tem algum conselho sobre como lidar com isso corretamente nos dias de hoje? O artigo que mencionei acima é de 2009 e suspeito que não seja a melhor maneira de sobrepor o texto.