Überschriften oder Texte durch Grafiken ersetzen mit CSS

Wer eine Google-sichere und zudem noch eine barrierearme Möglichkeit sucht, um bspw. seine Headerüberschrift durch eine Grafik zu ersetzen, kommt und die bekannte Gilder/Levin Replacement-Methode nicht herum. Der große Vorteil dieser Methode ist, dass bei deaktivierter Grafikanzeige der Text sichtbar wird.

Allerdings wird hier ein zusätzliches leeres span-Element benötigt. Auch können keine transparenten Grafiken verwendet werden, da sonst der darunterliegende Text hindurchscheinen würde.

Das HTML-Markup


<h1><span></span>Überschrift</h1>
 

Das leere <span></span> Element wird benötigt, um die Hintergrundgrafik aufzunehmen. Wichtig ist nur, dass das Element vor der Überschrift notiert wird.

CSS Style-Angaben


h1 {
 margin:0; 
 padding:0; 
 position:relative;
 width:500px;
 height:50px;
 background:#09c;
 color:#ffa;
 text-align:center;
 overflow:hidden;
}

h1 span {
 position:absolute;
 left:0;
 top:0;
 width:500px;
 height:50px;
 display:block;
 background:url(text.jpg) no-repeat 0 0 transparent;
}
 

Die wichtigste Angabe im h1 Deklarationsblock ist position:relative;, die dafür sorgt, dass sich das span Element innerhalb von h1 absolut positionieren lässt. Bildlich gesprochen schwebt die Grafik über den Text. Um ein Vorgucken des Textes bei einer Schriftgrößenänderung zu verhindern, wird mit overflow:hidden überstehender Text abgeschnitten. Damit das Hintergrundbild im <span></span> Element richtig angezeigt werden kann, muss es noch zum Block-Element befördert werden. Denn nur so können die erforderlichen Angaben für width und height festgelegt werden. Die Angeben top:0; und left:0; benötigen unsere Lieblings-Browser (IE 6 - 7) und müssen immer mit angegeben werden.

Hier mal ein einfaches Beispiel»

Natürlich seit ihr nicht nur auf Überschriften beschränkt. So lassen sich auch kleine Navigationsleisten mit Grafiken verschönern. Wie das geht, könnt ihr hier» erfahren.

Eine Übersicht aller bekannten Image-Replacement-Techniken von Jens O. Meiert findet ihr hier»

erstellt am 05.07.2011

nach oben