CSS Achtergrondherhaling

CSS achtergrond-repeat

Standaard:achtergrond-image De eigenschap herhaalt afbeeldingen in zowel de horizontale als de verticale richting.

Sommige afbeeldingen zijn alleen geschikt voor herhaling in de horizontale of verticale richting, anders ziet het er vreemd uit, zoals hieronder te zien is:

Voorbeeld

body {
  achtergrond-image: url("gradient_bg.png");
}

Probeer het zelf

Als de afbeelding hierboven alleen horizontaal herhaald wordt (achtergrond-repeat: herhalen in de horizontale richting;)，dan ziet de achtergrond er beter uit:

Voorbeeld

body {
  achtergrond-image: url("gradient_bg.png");
  achtergrond-repeat: herhalen in de horizontale richting;
}

Probeer het zelf

Tip:Als je een afbeelding wilt herhalen in de verticale richting, stel dan in: achtergrond-repeat: herhalen in de verticale richting;.

CSS achtergrond-repeat: geen herhaling

background-repeat De eigenschap kan ook worden gebruikt om de achtergrondafbeelding slechts één keer weer te geven:

Voorbeeld

De achtergrondafbeelding wordt slechts één keer weergegeven:

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}

Probeer het zelf

In het voorbeeld staat de achtergrondafbeelding op dezelfde positie als de tekst. We willen de positie van het beeld wijzigen om te voorkomen dat het beeld de tekst te veel verstoort.

CSS background-position

background-position De eigenschap specifies de positie van de achtergrondafbeelding.

Voorbeeld

Plaats de achtergrondafbeelding in de rechterbovenhoek:

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Probeer het zelf