Tekst op afbeeldingen met CSS en HTML

19-04-2012 | Marcel van Langen | HTML, XHTML en CSS | XHTML, photoshop, CSS, image, tag, container

Tekst bovenop een afbeelding plaatsen. Het klinkt eigenlijk heel simpel. Je kunt er natuurlijk voor kiezen een afbeelding als achtergrond te gebruiken voor je DIV of tabelcel, maar dat heeft een aantal nadelen. Beter is het te kiezen voor een afbeelding op de voorgrond met daar bovenop tekst geplaatst. Maar hoe doe je dat nou eigenlijk in CSS met HTML. Tijd voor een korte uitleg!

Er kunnen allerlei redenen zijn om tekst over een afbeelding te plaatsen. Zeker met de nieuwe mogelijkheden van CSS3 kun je hiermee fantastische combinaties van afbeelding en tekst maken. Een betere vindbaarheid kan ook een reden zijn om tekst pas later over een afbeelding te zetten. Google kan immers de tekst op een afbeelding (nog) niet lezen, maar tekst over een afbeelding wel.

Maar goed, hier gaan we via een voorbeeld toelichten hoe je eenvoudig tekst over een afbeelding kunt plaatsen. Om te beginnen dien je de volgende CSS code op te nemen. Dit kan je doen door de CSS inline op te nemen, maar overzichtelijker en verstandiger is het natuurlijk om deze toe te voegen aan een apart stylesheet.

.afbeelding_container {
position: relative;
float: left;
}

.afbeelding_container .tekst_container {
position: absolute;
top: 10px;
left: 20px;
color: #FFFFFF;
}

Zoals je kunt zien hebben we twee containers gemaakt, een afbeelding_container voor de afbeelding en tekst_container voor de tekst. Aan beide elementen zijn een aantal kenmerken meegegeven. Het meeste zal duidelijk zijn. Let er wel op dat de afbeelding_container als position relative is en de tekst_container absoluut. Voor de tekst_container hebben we bovendien via top en left aangegeven dat de tekst niet op zijn normale plaats moet verschijnen, maar 10 pixels vanaf de bovenkant en 20 pixels vanaf de linker zijkant. Dit kun je natuurlijk zelf naar eigen smaak aanpassen.

Nu de bijbehorende HTML. Plaats daarvoor de volgende code in je template:

<div class="afbeelding_container">
<img src=".._images/onderliggende_afbeelding.png" />
<div class="tekst_container">
<p>Tekst over de afbeelding</p>
</div>
</div>

Zoals je kunt zien is de afbeelding opgenomen in de DIV afbeelding_container. Vanzelfsprekend pas je deze code zodanig aan dat het een verwijzing bevat naar jouw eigen afbeelding. En in de DIV tekst_container staat de tekst die je over de afbeelding wilt zien.

Zo eenvoudig is het!

Over Morloff

Morloff ontwerpt en realiseert succesvolle webtoepassingen op het gebied van procesoptimalisatie, eCommerce en rapportage door de inzet van moderne webtechnieken, sociale media en zoekmachine optimalisatie.

over ons | diensten | portfolio | contact | route

naar website IJsmonster.nl naar website ICT intermediairs naar website marcelvanlangen.com

Twitter

Morloff

Cuneraweg 169a
3911 RH Rhenen

M +31 (0)6 - 515 96 189
W www.morloff.nl
E contactformulier

Morloff op Twitter Morloff op Facebook Morloff op LinkedIn Morloff via RSS