Tässä osassa kerrotaan väreistä ja taustoista. Käsiteltäviä attribuutteja ovat; color, background-color, background-image, background-repeat, background-attachment ja background-position.

Väri
Color attribuutilla voidaan määrittää kirjasimelle eri värejä.
Taustaväri
Background-color attribuutilla voidaan määrittää elementeille taustaväri.
Taustakuva
Background-image attribuutilla voidaan määrittää taustalle jokin kuva.
Taustakuvan sijainti
Background-position attribuutilla voidaan määrittää taustakuvan sijainti selaimessa.
Taustakuvan toistettavuus
Background-repeat attribuutilla voidaan määrittää taustakuvalle erilaisia toistettavuuksia.
Taustakuvan liikkuminen
Background-attachment attribuutilla voidaan määrittää taustakuvan liikkumiseen vaikuttavia ominaisuuksia.

Väri (color)

Color attribuutilla voidaan määrittää kirjasimelle eri värejä. Mahdollisina arvoina voidaan käyttää hex-koodeja, rgb-arvoja ja värin englanninkielistä nimeä.

color:arvo;
Esimerkiksi
color:#000;
color:black;
color:rgb(0,0,0);
Esimerkkejä

Tämän tekstin väri on punainen ja se on annettu arvolla "red".

Tämän tekstin väri on sininen ja se on annettu rgb-arvoilla rgb(47,151,255)

Tämän tekstin väri on harmaa ja se on annettu hex-koodilla #c8c8c8

Taustaväri (background-color)

Background-color attribuutilla voidaan määrittää elementeille taustaväri. Mahdollisina arvoina voidaan käyttää hex-koodeja, rgb-koodeja ja englanninkielistä nimeä. Arvolla transparent saadaan aikaan läpinäkyvä taustaväri. Jos taustaväriä ei ole määritelty, käytetään oletusarvoa "transparent".

background-color:arvo;
Esimerkiksi
background-color:red;
bacground-color:transparent;
Esimerkki

Tämän elementin taustaväri on punainen.

Taustakuva (background-image)

Background-image attribuutilla voidaan määrittää taustalle jokin kuva. Taustakuvalle voidaan määrittää myös toistettavuuksia, liikkuvuuksia ja sijainteja, mutta niistä lisää alenpana. Taustakuvan yhteydessä kannattaa käyttää myös taustaväriä, sillä jos kuvia ei voida näyttää, niin näytetään väri. Background-image attribuutilla mahdollisia arvoja ovat "url" ja "none".

background-image:url(polku);
background-image:none;
Esimerkiksi
background-image:url(kuvat/taustakuva.jpg;)
Esimerkki

Tässä elementissä on taustakuva.

Taustakuvan sijainti (background-position)

Background-position attribuutilla voidaan määrittää taustakuvan sijainti selaimessa. Mahdollisina arvoina voidaan käyttää prosentteja, pituuksia sekä arvoja; left, center, right, top ja bottom. Jos sijainti määritetään prosenteilla, tai pituuksilla, niin sijainnin määritys aloitetaan vasemmasta yläkulmasta. Ensin annetaan y-akselin sijainti, eli vaaka-akselin sijainti. Sitten annetaan x-akselin sijainti, eli pysty-akselin sijainti.

background-position:arvo;
Esimerkki
background-position:right bottom;

Esimerkissä määritimme taustakuvan sijainniksi oikean alakulman.

Taustakuvan toistettavuus (background-repeat)

Background-repeat attribuutilla voidaan määrittää taustakuvalle erilaisia toistettavuuksia. Mahdollisia arvoja ovat; repeat, repeat-x, repeat-y ja no-repeat. Arvo "repeat" toistaa taustakuvaa sekä pysty-, että leveyssuunnassa niinpaljon, kuin selain vaatii. Arvolla "repeat-x" taustakuva toistetaan vain x-akselin suuntaisesti. Arvolla "repeat-y" vastaavasti toistetaan vain y-akselin suuntaisesti. Arvo "no-repeat" määrittää, ettei taustakuvaa toisteta ollenkaan, vaan se näytetään vain kerran.

backround-repeat:repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
background-repeat:no-repeat;
Y-akseli esimerkki

Tässä elementissä taustakuvan leveys on vain 1px, mutta se on laitettu venymään y-akselin suuntaisesti.

X-akseli esimerkki

Tässä elementissä taustakuvan korkeus on vain 1px, mutta se on laitettu venymään x-akselin suuntaisesti.

Taustakuvan liikkuminen (background-attachment)

Background-attachment attribuutilla voidaan määrittää taustakuvan liikkumiseen vaikuttavia ominaisuuksia. Mahdollisia arvoja ovat scroll ja fixed. Arvo scroll määrittää ominaisuuden siten, että taustakuva liikkuu sisällön mukana, kun vierityspalkkia vieritetään. Arvo fixed määrittää ominaisuuden siten, että taustakuva ei liiku vierityspalkkia vierittämällä.

background-attachment:scroll;
background-attachment:fixed;