De bedoeling:

Een tekst te vervangen door een afbeeding door gebruik te maken van enkel CSS (en je afbeelding natuurlijk). Waar we mee gaan werken is een eenvoudige <h2> tag en een extra <span> tag (die enkel noodzakelijk is voor FIR).

We bespreken hier voorlopig 3 mogelijkheden.

De mogelijkheden A, B & C

Methode A: Fahrner Image Replacement (FIR)

Genoemd naar Todd Fahner die deze techniek uitgevonden heeft om tekst te vervangen met een afbeelding door gebruik te maken van de background (of background-image) mogelijkheid in CSS.

De CSS voor deze methode heeft de extra <span> tag nodig

<h2><span>Tekst vervangen door
een afbeelding met Css</span></h2>

h2 {
width: 287px;
height: 29px;
background: url ("afbeelding.gif") no-repeat;
}

h2 span {
display: none;
}

Wat er hier gebeurd is dat je bepaald voor de </h2> dat er een achtergrond afbeelding is die 287px breed is en 29px hoog (px = pixel) die we niet willen dat deze zich zelf herhaald (no-repeat), en dat de <span> in de </h2> niet mag worden weergegeven door display:none te gebruiken.
Geen enkele browser zal tekst weergeven als er display:none wordt toegepast aan een XHTML tag.

Voordelen: Door CSS te gebruiken om afbeelding weer te geven zijn we zeker dat als een bezoeker met een browser je site bezoekt welke geen Css ondersteuning heeft, er zeker de tekst wordt weergegeven.

Nadelen: Gebruik te moeten maken van een onbeduidende extra <span> tag voor deze methode te laten werken, en de mogelijkheid dat er werkelijk mensen bestaan die “afbeeldingen weergeven” uitgezet hebben in hun browser (om bandbreedte te besparen ofzo) maar wel de CSS ondersteuning aan hebben staan, welke als gevolg heeft dat geen tekst en geen afbeelding getoond worden.

Methode B: Leahy / Langridge Image Replacement (LIR)

Methode samen ontwikkeld door Seamus Leahy & Stuart Langridge, die zich vooral richt op het placeren van de afbeelding, dus er is geen extra tag meer nodig zoals bij FIR

Geen extra <span> nodig

<h2>Tekst vervangen door een afbeelding met CSS</h2>

h2 {
padding: 90px 0 0 0;
overflow: hidden;
background: url ("afbeelding.gif") no-repeat;
height: 0px !important; /*hack voor de meeste browsers*/
height /**/:90px; /*Hack voor IE5*/
}

Eigenlijk zo simpel dat je er zelf niet op zou komen, de tekst wordt door middel van padding-top (de eerste waarde van padding is top) 90px naar beneden geplaatst, waarbij we wel moeten rekening houden dat de afbeelding die we wensen te gebruiken ook 90px hoog moet zijn (anders pas je de waarden aan aan de afbeeldings hoogte).
Om dan zeker te zijn dat de tekst niet wordt weergegeven stellen we de hoogte in op 0px en plaatsen er de !important regel aan (hack voor de meeste browsers), zodat alle browsers (behalve IE5) de daaropvolgende regel overslaan.
Dus goed CSS ondersteunende browsers zullen de 2de height regel overslaan terwijl juist enkel IE5 deze regel zal herkennen, maar de vorige weer niet. (raar maar waar)

Voordelen: Het niet meer moeten gebruiken van de overbodige <span> wat resulteert in minder code, minder code is altijd iets om voor te gaan.

Nadelen: Het moeten gebruik maken van een IE5 box model Hack, en weeral de mogelijkheid dat er werkelijk mensen bestaan die “afbeeldingen weergeven” uitgezet hebben in hun browser (om bandbreedte te besparen ofzo) maar wel de CSS ondersteuning aan hebben staan, welke als gevolg heeft dat geen tekst en geen afbeelding getoond worden.

Methode C: The Phark method

Op deze methode kwam Mike Rundle door een ongeloofelijke abnormale groote text-indent waarde mee te geven zodat het zelfs op de grootste monitoren ter wereld onmogelijk is om de tekst weer tegeven.

<h2>Tekst vervangen door een afbeelding met Css</h2>

h2 {
height: 26px;
text-indent: -5000px;
background: url ("afbeelding.gif") no-repeat;
}

De tekst inspringing krijgt een negatieve waarde (dus naar links) van maar liefst 5000px, dus de tekst zal nooit worden weergegeven.

Voordelen: Minste hoeveelheid aan code, geen IE5 Box model hack of extra code nodig.

Nadelen: En weeral de mogelijkheid dat er werkelijk mensen bestaan die “afbeeldingen weergeven” uitgezet hebben in hun browser (om bandbreedte te besparen ofzo) maar wel de CSS ondersteuning aan hebben staan, welke als gevolg heeft dat geen tekst en geen afbeelding getoond worden.