background-repeat

background-repeat

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

          Leuk als je dit artikel deelt:
Share

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *