Als een background-imageeigenschap is opgegeven, background-repeatdefinieert de eigenschap in CSS of (en hoe) deze wordt herhaald. Hier is een voorbeeld:
html ( background-image: url(logo.png.webp); background-repeat: repeat-x; )Dit zijn de mogelijke waarden voor deze eigenschap (naast de gebruikelijke dingen zoals inherit):
repeat: tegel de afbeelding in beide richtingen. Dit is de standaardwaarde.repeat-x: tegel de afbeelding horizontaalrepeat-y: tegel de afbeelding verticaalno-repeat: niet betegelen, de afbeelding slechts één keer weergevenspace: tegel de afbeelding in beide richtingen. Snijd de afbeelding nooit bij, tenzij een enkele afbeelding te groot is om te passen. Als meerdere afbeeldingen passen, plaats ze dan uit elkaar, waarbij eventuele afbeeldingen altijd de randen raken.round: tegel de afbeelding in beide richtingen. Snijd de afbeelding nooit bij, tenzij een enkele afbeelding te groot is om te passen. Als meerdere afbeeldingen passen in de overgebleven ruimte, druk ze dan samen of rek ze uit om de ruimte te vullen. Als er minder dan een halve beeldbreedte over is, strek je uit, als het meer is, rek je uit.
Er is ook de syntaxis van twee waarden:
.element ( /* background-repeat: horizontal vertical */ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; )Dat maakt de syntaxis met één waarde slechts een afkorting voor de syntaxis met twee waarden. Is bijvoorbeeld roundecht round round.
U kunt meerdere waarden ook door komma's scheiden als u met meerdere achtergronden te maken heeft.
Demo
Zie de Pen
background-repeat door CSS-Tricks (@ css-tricks)
op CodePen.
Interactieve demo over hoe spaceen roundwerk, in vergelijking met repeat:
Zie de Pen
The Different `background-repeat`s door Chris Coyier (@chriscoyier)
op CodePen.
Nog een demo met het wijzigen van het formaat, met een 'nep'-rand:
Bekijk de Pen
Fitted Border Image op de Easy Way door ShopTalk Show (@shoptalkshow)
op CodePen.
Hier is nog een leuke demo met hamburgers die demonstreren background-repeat: round;.
Verwant
- achtergrond-bijlage
- achtergrond-clip
- Achtergrond kleur
- achtergrond afbeelding
- achtergrond-oorsprong
- achtergrond-positie
- achtergrondgrootte
Middelen
- CSS3 Spec
- MDN
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| 1+ | 1+ | 1+ | 3.5+ | 4+ | 1+ | 1+ |
De door komma's gescheiden synta met meerdere waarden wordt alleen ondersteund in Firefox 3.6+ en IE 9+. De syntaxis met twee waarden voor het beheren van gescheiden horizontale en verticale waarden wordt alleen ondersteund in Firefox 13+ en IE 9+. De rounden spacezoekwoorden zijn alleen Firefox 49+ en IE 9+.