3.3: Achtergrondafbeelding

Je kunt een afbeelding ook opnemen als je achtergrond van een webpagina. In deze pagina is dit toegepast. Om hem schermvullend te krijgen plaatst de browser meerdere van deze afbeeldingen naast en onder elkaar, net zolang tot het hele scherm gevuld is.
Om zo'n achtergrond in je website op te nemen wordt het body-element uitgebreid met de optie style="background-image: url(plaatje.gif)". Voor plaatje.gif vul je natuurlijk de naam en de juiste verwijzing in van jouw achtergrondbestand. Let op dat de verwijzing van het plaatje vooraf gegaan wordt met url( en afsluit met een haakje )

Om op eenvoudige wijze aan een (originele) achtergrond te komen kun je een kleine tekening in een tekenpakket maken en hem opslaan als gif, png of jpg. Let hierbij op voldoende contrast tussen de achtergrond en de gebruikte letterkleur in de html-pagina.

Opdracht 11: Achtergrond

Rechtsklik op afbeelding die hier links staat afgebeeld. Kies voor 'afbeelding opslaan als...'. Sla de afbeelding op in jouw website in de map 'images onder de naam html_bg.jpg. Zorg ervoor dat het bestand rijm.html een achtergrondafbeelding krijgt namelijk html_bg.jpg. Bewaar rijm.html.

Als je een achtergrondafbeelding alleen horizontaal wilt laten herhalen, dan kun je gebruik maken van de volgende style-toevoeging: background-repeat: repeat-x;

Wanneer we dit plaatje pattern.gif: horizontaal patroon in de horizontale richting herhalen met de volgende code:
style="background-image: url(images/pattern.gif); background-repeat: repeat-x;"
dan komt het er als volgt uit te zien:

Ditzelfde kunnen we toepassen in de verticale richting met de toevoeging background-repeat: repeat-y;
Dat ziet er dan als volgt uit:

Wil je dat de achtergrond helemaal niet herhaald wordt, dan kun je de style-toevoeging background-repeat: no-repeat gebruiken. Dat ziet er dan weer als volgt uit:

Extra

Zoek een kleine afbeelding op het internet, die je als achtergrondafbeelding kunt gebruiken. Probeer in één van je eerder gemaakte webpagina's alledrie de bovengenoemde opties uit. Bewaar de webpagina met het mooiste resultaat.