CSS background-repeat Eigenschap

Definitie en gebruik

background-repeat Instellingen van de eigenschap en hoe de achtergrondafbeelding moet worden herhaald.

Standaard herhaalt de achtergrondafbeelding in zowel horizontale als verticale richting.

Uitleg

De background-repeat-eigenschap definieert het tilingpatroon van het beeld.

van het oorspronkelijke beeld herhaald, het oorspronkelijke beeld wordt gedefinieerd door background-image definieert en volgens background-position waarden.

Zie ook:

CSS handleiding:CSS achtergrond

CSS referentiemanual:background-position-eigenschap

HTML DOM referentiemanual:backgroundRepeat-eigenschap

Voorbeeld

body
  {
  background-image: url(stars.gif);
  background-repeat: repeat-y;
  }

Probeer het zelf uit

Tips en opmerkingen

Tip:De positie van de achtergrondafbeelding wordt bepaald door de background-position-eigenschap. Als de background-position-eigenschap niet is vastgesteld, wordt het beeld geplaatst in de linksonderhoek van het element.

CSS syntaxis

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

Eigenschapswaarde

Eigenschapswaarde

Waarde Beschrijving
repeat Standaard. De achtergrondafbeelding wordt herhaald in de verticale en horizontale richting.
repeat-x De achtergrondafbeelding wordt herhaald in de horizontale richting.
repeat-y De achtergrondafbeelding wordt herhaald in de verticale richting.
no-repeat De achtergrondafbeelding wordt slechts één keer weergegeven.
inherit Stelt dat de instelling van de background-repeat-eigenschap van het ouderlement moet worden overgenomen.

Technische details

Standaardwaarde: repeat
Inheritsiviteit: nee
Versie: CSS1
JavaScript syntaxis: object.style.backgroundRepeat="repeat-y"

Meer voorbeelden

Hoe je een achtergrondafbeelding verticaal moet herhalen
Dit voorbeeld toont hoe je een achtergrondafbeelding verticaal moet herhalen.
Hoe je een achtergrondafbeelding horizontaal moet herhalen
Dit voorbeeld toont hoe je een achtergrondafbeelding horizontaal moet herhalen.
Hoe je een achtergrondafbeelding slechts één keer moet weergeven
Dit voorbeeld toont hoe je een achtergrondafbeelding slechts één keer moet weergeven.

Browserondersteuning

Tabelnummers geven de eerste browserversie aan die de eigenschap volledig ondersteunt.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5