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!

« Lees de omschrijving en reacties

Inhoudsopgave

  1. Inleiding - Fonts
  2. Borders
  3. Padding
  4. Background images
  5. Andere manieren om je code in te korten

PHP tutorial opties

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.