CSS: background

Taust. Kõik tausa määratlemise valikud.

Atribuut: background

Üldine taustainfot määrav atribuut, mis võimaldab määrata korraga nii taustavärvi, -pildi, -positsiooni kui ka tausta kuvamisviisi. Võimaldab määrata järgnevad väärtused:

• taustavärv - kas värvikoodi või ingliskeelse nimetuse järgi;
• taustapilt - URL kujul url(pildiasukoht.png);
• taustapildi positsioon - suunal horisontaaltelg-vertikaaltelg, võimalikud väärtused:
  • center keskel (vaikimisi väärtus ning kasutuses juhul, kui ühel või mõlemal teljel jääb väärtus lisamata);
  • top üleval;
  • bottom all;
  • left vasakul;
  • right paremal.
• taustapildi kinnitusviis - võimalikud väärtused:
  • inherit
  • scroll (vaikimisi väärtus)
  • fixed

Näited

background: green url(pildifail.png) no-repeat top left;

Atribuut: background-attachment

Taustapildi kinnitusviis. Kas taustapilt jääb lehe kerimisel jätkuvalt nähtavale (kõige korrektsem kasutusviis body elemendi puhul). Võimalikud väärtused:

• inherit
• scroll (vaikimisi väärtus)
• fixed

Näited

body {
  background-attachment: fixed;
}

Atribuut: background-image

Võimaldab määrata elemendile taustapildi, väärtuseks peab olema taustapildi asukoht, näiteks url(pildifail.png).

Näited

background-image: url(pildifail.png);

Atribuut: background-position

Taustapildi asukoht teda sisaldava elemendi sees. Väärtused peavad olema märgitud nii, et esmalt asukoht horisontaaltelje suhtes, järgmisena asukoht vertikaaltelje suhtes. Võimalikud väärtused:

• center keskel (vaikimisi väärtus ning kasutuses juhul, kui ühel või mõlemal teljel jääb väärtus lisamata;
• top üleval;
• bottom all;
• left vasakul;
• right paremal;
• pikkusühiku abil;
• protsentides.

background-position: bottom right;

Atribuut: background-repeat

Määrab selle, kas taustapilti korratakse siis, kui element on dimensioonidelt suurem kui pilt ning kui korratakse, siis millisel teljel. Võimalikud väärtused:

• inherit
• repeat vaikeväärtus;
• repeat-x pilti korratakse vaid horosontaalteljel (x-telg);
• repeat-y pilti korratakse vaid vertikaalteljel (y-telg);
• no-repeat pilti ei korrata, kuvatakse vaid ühe korra.

background-repeat: repeat-x;