Realmente no estoy seguro de cómo plantear esta pregunta de otra manera, pero estoy tratando de cargar texto en la parte superior de una imagen, lo que parece ser una tarea difícil en sí misma, pero lo tengo funcionando.esta tutorial. Desafortunadamente, el tutorial está un poco desactualizado y no puedo encontrar una manera de cambiar dinámicamente tanto el tamaño de la fuente como el tamaño del tramo para dispositivos móviles y aún mantener el texto en el lugar correcto sobre la imagen.

Cuando se cambia el tamaño de la ventana, el texto y el cuadro no se ajustan correctamente (se desborda fuera de la imagen).

He intentado calcular el porcentaje, así como otras técnicas con poca suerte. El CSS que estoy usando para mostrar el texto sobre la imagen con un fondo se puede ver a continuación.

¿Cuál es la mejor práctica para superponer texto en una imagen y cómo se podría hacer para que sea sensible? Esto es lo que estoy tratando de usar para los navegadores de escritorio en este momento:

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

¿Alguien tiene algún consejo sobre cómo manejar esto correctamente en estos días? El artículo que mencioné anteriormente es de 2009 y sospecho que no es la mejor manera de superponer texto.