Het is weer zondag en dus tijd voor de reeks CSS op zondag. Ik ben aangekomen bij background-repeat. Wanneer je een plaatje als achtergrond gebruikt dan wordt dit plaatje over de hele achtergrond geplaatst. Wanneer het kleiner is dan het scherm, dan herhaalt het plaatje zich horizontaal (repeat-x) en verticaal (repeat-y).

De waarden van background-repeat
Er zijn 5 waarden voor dit CSS element. Te weten repeat, repeat-x, repeat-y, no-repeat en inherit. Deze laatste is de overerving. De waarde van een eerder element wordt dan overgenomen.
Bij repeat wordt het achtergrondplaatje horizontaal en verticaal herhaalt. Met repeat-x wordt het plaatje alleen horizontaal herhaalt. Voor repeat-y geldt hetzelfde, maar dan in verticale richting.

no-repeat gebruik je om het achtergrondplaatje een keer te laten verschijnen. Het plaatje wordt niet herhaald.

Standaardinstelling
De standaardinstelling van background-repeat is repeat.

Voorbeelden
body {background-repeat: no-repeat;}
p {background-repeat: repeat-x;}
p.stop {background-repeat: repeat-y;}

In deze div wordt het plaatje horizontaal herhaalt totdat het vak vol is. Repeat-x
In deze div wordt het plaatje verticaal herhaalt totdat het vak vol is. Repeat-y

Alle CSS elementen

Als je dit een interessant
artikel vond…

wil je vast ook mijn NIEUWSBRIEF!
Iedere week weer een nieuw ARTIKEL!

Krijg je ook meteen dit ebook met 101 tips voor
creatieve ondernemers & bloggers!

ebook 101 tips voor creatieve ondernemers en bloggers