Background images
Uitgebreide vorm
[red]p {
background-color: #fff;
background-image: url(bg.jpg);
background-position: left;
background-position: top;
background-repeat: repeat;
background-attachment: fixed;
}[/red]
Image shorthand
[red]p {
background: #fff url(bg.jpg) left top repeat fixed;
}[/red]
Volgorde voor de shorthand: color - image - horizontal position - vertical position - repeat - fixed
Dit overzicht geeft een redelijk volledig beeld van de mogelijkheden. Het duurt een tijdje voor je alles uit je hoofd kent. Het is nogal veel om te onthouden, maar mijns inziens zeker de moeite waard. Ga het volgend voorbeeld eens na:
[red]p {
font: 12px verdana;
padding: 3px;
margin: 3px 0px;
background: #fff url(bg.jpg) center top repeat-x;
border: 1px dotted #ddd;
}[/red]
Als je al deze attributen zonder shorthands zou moeten noteren wordt je code een heel stuk langer!