CSS- achtergrondafbeelding herhalen
CSS achtergrond herhalen
Standaard background-image
herhaalt de eigenschap een afbeelding zowel horizontaal als verticaal.
Sommige afbeeldingen moeten alleen horizontaal of verticaal worden herhaald, anders zien ze er vreemd uit, zoals deze:
Voorbeeld
body
{
background-image: url("gradient_bg.png");
}
Als de bovenstaande afbeelding alleen horizontaal wordt herhaald ( background-repeat: repeat-x;
), ziet de achtergrond er beter uit:
Voorbeeld
body
{
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Tip: Als u een afbeelding verticaal wilt herhalen, stelt u inbackground-repeat: repeat-y;
CSS achtergrond herhalen: niet herhalen
Het slechts één keer weergeven van de achtergrondafbeelding wordt ook gespecificeerd door de background-repeat
eigenschap:
Voorbeeld
Toon de achtergrondafbeelding slechts één keer:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
In het bovenstaande voorbeeld wordt de achtergrondafbeelding op dezelfde plaats als de tekst geplaatst. We willen de positie van de afbeelding veranderen, zodat deze de tekst niet teveel verstoort.
CSS-achtergrondpositie
De background-position
eigenschap wordt gebruikt om de positie van de achtergrondafbeelding op te geven.
Voorbeeld
Plaats de achtergrondafbeelding in de rechterbovenhoek:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}