Background
1. Background
2. Background-image:
3. Background-attachment:
4. Background-repeat:
1. Background color
Standaard gezien is de kleur van de achtergrond wit. Maar dit kunnen we gemakkelijk veranderen natuurlijk. Een voorbeeldje:
<style type="text/css">
body { background:#00ff00; color:#ffffff }
</style> |
body { background:#00ff00 } betekent een groene achtergrond.
Je kan ook: body { background:green } gebruiken maar hexadecimale waarden zijn flexibeler.
 top
2. Background-image:
We kunnen ook afbeeldingen als achtergrond gebruiken.
<style type="text/css">
body { background-image: url("afbeelding.gif") }
</style> |
body { background-image: url("afbeelding.gif") } zal "afbeelding.gif" als achtergrond gebruiken.
Dit kan natuurlijk ook een andere naam zijn of een andere extensie hebben zoals "afbeelding.jpg."
Als we afbeeldingen als achtergrond gebruiken dan kunnen we met CSS er nog wat truukjes aan toevoegen.
Kijk eens naar volgende stijl elementen:
NOTA:
Als de afbeelding zich niet in dezelfde directory (map) bevindt als waar het HTML document zich bevindt dan moet dit gespecifieerd worden. Dit doen we als volgt:
body { background-image: url("http://mijnadres.com/afbeelding.gif") }. In dit geval wordt de afbeelding opgeladen via de gespecifieerde weblocatie (URL).
top
3. Background-attachment:
<style type="text/css">
body { background-image: url("afbeelding.gif"); background-attachment: fixed }
</style> |
background-attachment: fixed zal er voor zorgen dat de achtergrond "statisch" blijft terwijl de inhoud over de achtergrond scrollt.
Als we background-attachment: scroll gebruiken dan scrollen zowel achtergrond als tekst over het scherm.
top
4. Background-repeat:
<style type="text/css">
body { background-image: url("afbeelding.gif"); background-repeat: repeat-y }
</style> |
background-repeat: repeat-y betekent dat de achtergrond vertikaal herhaald zal worden (de breedte en de lengte van de afbeelding in 1 kolom).
Andere waarden kunnen zijn:
background-repeat: repeat-x: horizontaal herhaald (1 enkele rij)
background-repeat: repeat zowel horizontaal als vertikaal herhaald.
background-repeat: no-repeat enkel 1 kopie van de afbeelding wordt getoond.
NOTA:
We kunnen verschillende stijl elementen tegelijk opnemen.
Een voorbeeld:
<style type="text/css">
body { background-image: url("afbeelding.gif"); background-repeat: repeat-y }
</style> |
Ook de volgende vormen zijn geldig:
<style type="text/css">
body { background-image: url("afbeelding.gif");
background-repeat: repeat-y;
background-attachment: fixed }
</style> |
Of de verkorte vorm:
<style type="text/css">
body { background-image: url("afbeelding.gif"); repeat-y fixed }
</style> |
top
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
