Naprawdę nie jestem pewien, jak postawić to pytanie w inny sposób, ale próbuję załadować tekst na wierzch obrazu - co wydaje się być trudnym zadaniem samo w sobie, ale używam goto seminarium. Niestety, samouczek jest nieco nieaktualny i nie mogę znaleźć sposobu na dynamiczną zmianę rozmiaru czcionki i rozmiaru rozpiętości dla telefonu komórkowego i nadal utrzymywać tekst we właściwym miejscu na górze obrazu.

Po zmianie rozmiaru okna tekst i pudełko nie zmieniają rozmiaru poprawnie (przepełnia się poza obrazem).

Próbowałem wielkości procentowej, a także innych technik przy odrobinie szczęścia. CSS, którego używam do wyświetlania tekstu na obrazie z tłem, można zobaczyć poniżej.

Jaka jest najlepsza praktyka nakładania tekstu na obraz i jak można by go dostosować? Właśnie to próbuję teraz wykorzystać w przeglądarkach komputerowych:

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

Czy ktoś ma jakieś wskazówki, jak sobie z tym poradzić? Wspomniany wyżej artykuł pochodzi z 2009 roku i podejrzewam, że nie jest to najlepszy sposób na nakładanie tekstu.