marcinex

CSS: Überschrift durch Bild ersetzen, barrierefrei

Mit Hilfe von CSS kann man ganz einfach Text durch ein Bild ersetzen, ohne dass das die Suchmaschinen oder Screenreader stört. Dazu setzt man ein Bild als Hintergrundbild einer Überschrift z.B. H1 und blendet den Text mit einem kleinen Trick aus Das macht man, indem man den “text-indent” (Texteinzug) auf -9000px setzt. Somit ist der Text unsichtbar und wird durch das Hintergrundbild ersetzt.

CSS-code:

h1 {
	background: url(euer_hintergrund_bild.jpg);
	text-indent: -9000px;
	height:50px;
	width:150px;
}

XHTML-code:

<h1>Eure Überschrift</h1>

Kommentar schreiben

I'm WP-Hashcash. I eat spam.

CSS: Überschrift durch Bild ersetzen, barrierefrei

Mit Hilfe von CSS kann man ganz einfach Text durch ein Bild ersetzen, ohne dass das die Suchmaschinen oder Screenreader stört. Dazu setzt man ein Bild als Hintergrundbild einer Überschrift z.B. H1 und blendet den Text mit einem kleinen Trick aus Das macht man, indem man den “text-indent” (Texteinzug) auf -9000px setzt. Somit ist der Text unsichtbar und wird durch das Hintergrundbild ersetzt.

CSS-code:

h1 {
	background: url(euer_hintergrund_bild.jpg);
	text-indent: -9000px;
	height:50px;
	width:150px;
}

XHTML-code:

<h1>Eure Überschrift</h1>

Kommentar schreiben

Powered by WP-Hashcash.