Achtergrond

Met behulp van CSS is uiteraard ook mogelijk om een achtergrondkleur of een achtergrondafbeelding toe
te voegen aan je website. Ook is het mogelijk om een achtergrondkleur of afbeelding te plaatsen in
bijvoorbeeld een tabelcel, of een div etc. In onderstaande voorbeelden wordt steeds de achtergrond van
de <body> aangepast.
Achtergrondkleur
Als eerste de achtergrondkleur, om deze in te stellen voor je website gebruik je de
onderstaande "background-color" in je CSS code. Achteraan de code staat de kleur
aangegeven wat in het onderstaande geval rood is (#FF0000).
Om de kleur om de gehele pagina toe te passen stel je het in voor de body zoals hieronder.
<style type="text/css">
body {
background-color:#FF0000;
}
</style>
De achtergrondkleur is nu toegepast op de gehele website maar je kunt uiteraard het ook alleen instellen
op bijvoorbeeld een div. In de CSS geef je dan de classnaam aan die je aan de div in je HTML code hebt
meegegeven. In de CSS vermeld je het hetzelfde als hierboven met op de plek van de body de
.classnaam.
Achtergrondafbeelding
Een achtergrondafbeelding is ook in te stellen, bijvoorbeeld een patroon of een foto. In de CSS gebruik je
dan de onderstaande code waarin achter "url" de plek van de afbeelding staat die je gebruikt.
<style type="text/css">
body {
background-image: url(jouwplaatje.gif);
}
</style>
Als je een afbeelding toevoegt als achtergrond voor je website wordt deze standaard
horizontaal en verticaal herhaald schermvullend. Met een aanvullende code in de CSS kun je
bepalen dat een afbeelding of alleen horizontaal of alleen verticaal wordt herhaald.
De opties hiervoor zijn als volgt:

In de CSS code voeg je dat als volgt toe, hieronder is aangegeven dat de afbeelding alleen
horizontaal herhaald.
<style type="text/css">
body {
background-image: url(jouwplaatje.gif);
background-repeat:repeat-x;
}
</style>
Op de bovenstaande manier kun je een afbeelding toevoegen aan je website of bijvoorbeeld aan een
tabelcel of een div. In sommige gevallen is het ook handig om de positie van de achtergrond te bepalen,
bijvoorbeeld voor een achtergrond van een pagina waar de afbeelding in het midden of onderaan de
pagina moet komen of bijvoorbeeld een bepaald aantal pixels vanaf de zijkant.
Daarvoor gebruik je "background-position:" gevolgd door 1 van de onderstaande waardes.
(Sommige kunnen ook gecombineerd worden!).

Als laatste is er nog "background-position:10px 30px;", de achtergrond wordt dan geplaatst door een
eigen ingegeven aantal pixels, het eerste getal (10px) is het aantal pixels vanaf de linkerkant, het tweede
getal (30px) is het aantal pixels vanaf de bovenkant, dit is aan te passen naar wens.
In de code ziet dit er als volgt uit:
<style type="text/css">
body {
background-image: url(jouwplaatje.gif);
background-repeat:repeat-x;
background-position:10px 30px;
}
</style>
Als laatste kun je voor een achtergrondafbeelding van bijvoorbeeld de website bepalen of deze
stil moet blijven staan of herhaald moet meebewegen als je gaat scrollen op de pagina.
Meebewegen geef je aan met, background-attachement: scroll; en stil blijven staan krijg je met,
background-attachement: fixed;
In de CSS zelf ziet het er bijvoorbeeld als totaal dan zo uit.
<style type="text/css">
body {
background-image: url(jouwplaatje.gif);
background-repeat: no-repeat;
background-attachement: fixed;
}
</style>