CSS achtergrondafkorting

CSS background - afkortingseigenschap

om de code te verkorten, kun je ook alle achtergrondeigenschappen in één eigenschap specificeren. Dit wordt de afkortingseigenschap genoemd.

in plaats van zo te schrijven:

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

je kunt de afkortingseigenschap gebruiken background:

voorbeeld

stel achtergrondeigenschappen in met een afkortingseigenschap in één verklaring:

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

probeer het zelf uit

bij het gebruik van de afkortingseigenschap is de volgorde van de waarden als volgt:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

indien een waarde ontbreekt bij een eigenschap, maakt dat niets uit, zolang je de andere waarden op deze volgorde instelt. Let op, in het bovenstaande voorbeeld hebben we de eigenschap background-attachment niet gebruikt, omdat deze geen waarde heeft.

alle CSS-achtergrondeigenschappen

eigenschap beschrijving
background stel alle achtergrond-eigenschappen in met een afkortingseigenschap in één verklaring.
background-attachment stel in of de achtergrondafbeelding statisch is of samen met het overige deel van de pagina scrolt.
background-clip bepaal het te tekenen gebied van de achtergrond.
background-color stel de achtergrondkleur van het element in.
background-image stel de achtergrondafbeelding van het element in.
background-origin bepaal waar de achtergrondafbeelding geplaatst moet worden.
background-position Stel de startpositie van de achtergrondafbeelding in.
background-repeat Stel in of en hoe de achtergrondafbeelding herhaald wordt.
background-size Bepaal de grootte van de achtergrondafbeelding.