Een hoofding met achtergrondafbeelding toevoegen

Achtergrondafbeelding downloaden

 Download onderstaande afbeelding (klik rechts en kies ’Afbeelding opslaan als’). Bewaar de afbeelding in de submap ’img’ (afbeeldingen) die u hebt aangemaakt binnen in de map waar u uw webpagina’s hebt opgeslagen [1].

Ruimte voorzien voor de hoofding

 Klik met de rechter muisknop op een willekeurige plek binnen de tabel
 Kies ’Tabel invoegen > Rij erboven’

Kompozer voegt een nieuwe rij toe boven de huidige en maakt, net zoals in de oorspronkelijke rij, twee kolomcellen aan. Om de hoofding te plaatsen heeft u echter maar één cel nodig.

 Selecteer beide cellen door er overheen te slepen, of zet eerst uw cursor in één cel en klik daarna in de tweede terwijl u de SHIFT-toets ingedrukt houdt
 Klik rechts en kies ’Geselecteerde cellen samenvoegen’

De afbeelding plaatsen

In deze cel gaat u nu de afbeelding als achtergrond plaatsen. Opnieuw passen we hiervoor CSS toe.

 Klik op de knop ’CaScadeS’ om de CSS-editor te openen
 Maak een nieuwe stijlregel aan door op te klikken
 Geef als naam’.kop’ in; kies ’style applied to all elements of class’ en klik op ’Stijlregel aanmaken’
 Kies het tabblad ’Achtergrond’ en klik ’Bestand kiezen’
 Selecteer ’oswd_rubian.jpg’ in de map ’img’ die je daarnet gemaakt hebt en klik OK.

De afbeelding heeft, zoals u in Windows Verkenner kan nakijken, een hoogte van 80 pixels. De tabelcel waarin de foto terechtkomt is dus best ook 80 pixels hoog. Dat stelt u in als volgt:

 Klik rechts in de hoofdingcel en kies ’Tabelcel eigenschappen’
 Stel de hoogte in op 80px.

Sla de pagina op en bekijk het resultaat in Firefox.