Het is zeer gebruikelijk om de achtergrondkleur aan te passen, niet alleen van je hele pagina maar ook van 1 specifiek object zoals een div.
Omdat te doen is background. Background in combinatie met kleur kan dit:
body { background: #CCCCCC; background: rgb(255,0,255) }
Ze horen natuurlijk niet tegelijk, maar ze werken alletwee. De eerste werkt met een hexadecimaal systeem en de twee via rgb.
In sommige gevallen is het mooier om een plaatje als achtergrond te doen. Ook dat gaat weer via background, deze keer als volgt:
body{ background: url('images/plaatje.jpg'); }
As simple as that. Het enige wat nu vervelend is, is dat het plaatje zich blijft herhalen van links naar rechts en van boven naar beneden. Soms is dit fijn, soms ook niet. Om te zorgen dat je daar weer controle over krijgt, kun je na url() dit zetten:
No-repeat zorgt dat het plaatje 1x word weergegeven, repeat-y herhaalt het plaatje alles van boven naar beneden en repeat-x zorgt voor een herhaling van links naar rechts.
Dan heb je ook nog een manier om de plaatsing van je plaatje te manipuleren, want soms wil je je plaatje 1maal, maar wel in het midden. Dan kun je dit er weer achter zetten:
Wat wel aardig voor zich spreekt. Dan heb je ook nog fixed en scroll. Dat kun je er ook weer gewoon achter zetten. Fixed houd in dat als je scrollt, het plaatje niet meescrollt maar blijft staan. Stel je hebt een mooie div gemaakt, met een mooi plaatje erin, waar je ook in kunt scrollen, maar je wilt niet dat het plaatje meescrollt. Dan kun je dus fixed gebruiken.
voorbeeldje van alles:
<code=css>body{
background: url('images/plaatje.jpg') no-repeat center top fixed;
}</code>
Je kunt er ook een kleur én een achtergrond afbeelding neerzetten. Dat doe je door eerst de kleur neer te zetten en daarná alles voor je afbeelding.
body{ background: #FF0000 url('images/plaatje.jpg') no-repeat center top fixed; }