Je kunt natuurlijk ook een afbeelding gebruiken als achtergrond (hetzij op je gehele website, of alleen in je contentvlak etc.). Hiervoor zijn een aantal manier om het juiste resultaat te behalen. Ik gebruik even het eerste gedeelte uit de css van de “basis stylesheet” tutorial.
Kopieer onderstaande code naar een nieuw document in je .
body {
font: 11px Verdana, Arial;
color: #000000;
background-color: #ffffcc ;
}
1. Nu gaan we de achtergrondkleur veranderen voor een achtergrondafbeelding. Dit doe je door middel van background-color te vervangen door: onderstaande code.
background: url(http://url van jouw afbeelding);
2. Verander de url naar de door jouw gekozen achtergrondafbeelding en sla het document op als
3. Ga nu naar je browser, en zoek de hiervoor opgeslagen index.html op en open dit document. Zoals je ziet heb jij nu de pattern over je gehele pagina staan.
4. Maar je kunt de css ook zo aanpassen dat de afbeelding zich alleen horizontaal of verticaal herhaald. Dit kun je voor elkaar krijgen door een kleine aanpassing in je stylesheet.
Voor horizontale herhaling voeg je achteraan een toe.
background: url(http://url van jouw afbeelding) repeat-x;
Voor verticale herhaling voeg je achteraan een toe
background: url(http://url van jouw afbeelding) repeat-y;
5. Door nog een kleine aanpassing kun jij zowel een achtergrondafbeelding weergeven en een achtergrondkleur. Achter de repeat-x (of repeat-y) plaats je de kleurcode.
background: url(http://url van jouw afbeelding) repeat-x #000000;
6. Ik zal je twee voorbeelden laten zien, dan weet je wat ik met bovenstaande bedoel. Onderstaande link naar de pagina is met een gradientafbeelding, maar zonder achtergrondkleur. Dus gewoon de code van stap4 (de horizontale versie). Klik hier voor voorbeeldpagina zonder het toevoegen van een achtergrondkleur.
7. Hier is de versie van een gradientafbeelding met een achtergrondkleur (de code uit stap5). Klik hier voor voorbeeldpagina na het toevoegen van een achtergrondkleur.
