Text překrytý obrázkem

Hotová řešení > Text překrytý obrázkem

Text překrytý obrázkem

Následující řešení využijeme, pokud chceme například nadpis (druhé úrovně) mít jako obrázek, jelikož za pomoci CSS bychom takového vzhledu nedosáhli. Pokud se obrázek nenačte, měla by být na stránce textová alternativa. Řešení pomocí tagu img a altu není zrovna nejlepší. Podíváme se tedy, jak na to…

Chceme mít následující obrázek jako nadpis.

Nadpisu nastavíme position: relative, která do něj zavede souřadnicový systém. Na nulté souřadnice nadpisu pak „nalepíme“ pomocí position: absolute prvek span nesoucí obrázek.

Velikost textu bychom měli volit tak, aby se při běžném zobrazení do rozměrů obrázku vešel. Pokud bychom ji volili zbytečně velkou, mohl by být text po vypnutí obrázků zbytečně schovaný, kvůli overflow: hidden, které v nadpise zajišťuje, aby text, který je pod obrázkem, při případném zvětšení nevytékal zpod okrajů obrázku.

CSS

#o-zizalce {
  margin: 0; padding: 0;
  position: relative;
  overflow: hidden;
  font-size: 160%;
  }

#o-zizalce, #o-zizalce span {
  width: 311px; height: 43px;
  }

#o-zizalce span {
  background: url("povidani-o-zizalce.gif") no-repeat 0 0;
  display: block;
  position: absolute;
  top: 0; left: 0;
  }