Ich bin mir wirklich nicht sicher, wie ich diese Frage anders stellen soll, aber ich versuche, Text über ein Bild zu laden - was an sich schon eine knifflige Aufgabe zu sein scheint, aber ich habe es in Gang gebrachtdiese Tutorial. Leider ist das Tutorial etwas veraltet und ich kann nicht herausfinden, wie ich sowohl die Schriftgröße als auch die Bereichsgröße für Handys dynamisch ändern und den Text trotzdem an der richtigen Stelle über dem Bild beibehalten kann.

Wenn die Größe des Fensters geändert wird, ändert sich die Größe des Texts und des Felds nicht richtig (es läuft außerhalb des Bildes über).

Ich habe mit ein wenig Glück die prozentuale Größenanpassung sowie andere Techniken ausprobiert. Das CSS, das ich verwende, um den Text über dem Bild mit einem Hintergrund anzuzeigen, ist unten zu sehen.

Was ist die beste Vorgehensweise zum Überlagern von Text auf einem Bild und wie würde man vorgehen, um es reaktionsfähig zu machen? Folgendes versuche ich gerade für Desktop-Browser zu verwenden:

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

Hat jemand einen Rat, wie man dies heutzutage richtig handhabt? Der Artikel, den ich oben erwähne, stammt aus dem Jahr 2009 und ich vermute, dass dies nicht der beste Weg ist, Text zu überlagern.