Achtergrond

Je kunt als achtergrond ook een plaatje gebruiken op je website.Je gebruikt dan de eigenschap background-image.

body {
    background-image: url("plaatje.gif");
}

Standaard zal je plaatje niet één keer getoond worden; het plaatje wordt herhaald. Dus naast elkaar en daarna ook onder elkaar. Als je dat anders wilt kan dat!

Je kan het plaatje ook op een andere plek zetten met background-position Je kunt uitlijnen met bijvoorbeeld right / left en top

body {
  background-image: url("plaatje.gif");
  background-repeat: no-repeat;
  /* Eerst rechts links, dan boven beneden */
  background-position: right top;
} 

Je kunt ook een positie in pixels of in procenten weergeven.

/* positie: 50% van de breedte en 40 pixels van boven */
background-position: 50% 40px;

Je plaatje niet laten meebewegen als je scrollt:

background-attachment: fixed;

Veelgebruikt is ook de eigenschap "cover". Hierbij probeert de browser een plaatje zo te schalen dat hij zo goed mogelijk past. Kan goed werken met pagina-achtergronden:

background-size: cover;

Last updated

Was this helpful?