Herhaal CSS agtergrondprent
CSS agtergrond-herhaal
By verstek background-imageherhaal die eiendom 'n prent beide horisontaal en vertikaal.
Sommige beelde moet net horisontaal of vertikaal herhaal word, anders sal hulle vreemd lyk, soos volg:
Voorbeeld
body
{
background-image: url("gradient_bg.png");
}
As die prent hierbo net horisontaal herhaal word ( background-repeat: repeat-x;), sal die agtergrond beter lyk:
Voorbeeld
body
{
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Wenk: Om 'n prent vertikaal te herhaal, stelbackground-repeat: repeat-y;
CSS-agtergrond-herhaling: geen-herhaling
Om die agtergrondprent net een keer te wys, word ook deur die background-repeateiendom gespesifiseer:
Voorbeeld
Wys die agtergrondprent slegs een keer:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
In die voorbeeld hierbo word die agtergrondprent op dieselfde plek as die teks geplaas. Ons wil die posisie van die beeld verander, sodat dit nie die teks te veel versteur nie.
CSS agtergrondposisie
Die background-positioneiendom word gebruik om die posisie van die agtergrondprent te spesifiseer.
Voorbeeld
Plaas die agtergrondprent in die regter boonste hoek:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}