Tämä muotoilu toimii osittain IE 6:lla, ja IE 7:llä ja kokonaan FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Taustaväri määritetään background-color -määreellä. Väriksi kelpaa mikä tahansa väriosiossa esitellyistä keinoista, toisin sanoen siis heksakoodit, rgb-arvot tai värien suorat nimet.
| #xxxxxx | Väri heksakoodilla ilmaistuna. Jokainen x merkitsee numeroa väliltä 0-9 tai kirjainta a-f. |
|---|---|
| #xxx | |
| rgb(arvo,arvo,arvo) | Väri rgb-arvoilla ilmaistuna. Jokainen arvo on joko väliltä 0-255 tai 0-100 %. |
| värin nimi | Jonkin värin englanninkielinen nimi. |
| transparent | Läpinäkyvä taustaväri. |
| inherit | Väri periytyy ylemmiltä elementeiltä. |
Esimerkkejä:
Kolme tapaa määrittää tausta valkoiseksi: background-color:white; background-color:#fff; background-color:rgb(100%;100%,100%); Kolme tapaa määrittää tausta mustaksi: background-color:black; background-color:#000000; background-color:rgb(0,0,0); Määritetään läpinäkyvä taustaväri: background-color:transparent;
Tämä kikka ei toimi IE 6:lla, mutta kylläkin IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Mikäli halutaan aikaan läpikuultava taustaväri, kannattaa määrittää taustakuvaksi läpikuultava .png-kuva. .png-kuville voi säätää eri asteisia läpinäkyvyyksiä (samaankin kuvaan), ja mikäli käytetty taustakuva on vain yhden värinen ja kaikkialta yhtä läpikuultava, se näyttää käytössä taustaväriltä kuvan sijaan.
Läpikuultavia .png-kuvia voi tehdä useimmilla nykyaikaisilla kuvankäsittelyohjelmilla, kuten Adobe Photoshopilla, Corel Photo-Paintilla ja Corel Paint Shop Prolla.
Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Taustakuvan sijainti määritetään backgound-image -muotoilulla.
| url(osoite) | Määrittää taustakuvan osoitteen. |
|---|---|
| none | Ei taustakuvaa. |
| inherit | Taustakuva periytyy ylemmältä elementiltä. |
Esimerkiksi:
background-image:url(kuvan osoite);
Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Taustakuvan liikkumisella tarkoitetaan tässä yhteydessä sitä, liikkuuko taustakuva, kun sivua vierittää alaspäin. Liikkumattomuus toimii ainoastaan body-elementin taustassa.
| fixed | Taustakuva ei liiku (oletus). |
|---|---|
| scroll | Taustakuva liikkuu. |
| inherit | Liikkuminen / liikkumattomuus periytyy ylemmiltä elementeiltä. |
Esimerkiksi:
background-attachment:fixed;
Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Taustakuvalle voidaan myös määrittää sijainti määreellä background-position. Määreelle annetaan kaksi arvoa: ensin kerrotaan, missä taustakuva sijaitsee vaakasuunnassa, ja tämän jälkeen laitetaan välilyönti ja kerrotaan, missä taustakuva sijaitsee pystysuunnasta katsottuna.
Taustan sijainti voidaan määrittää joko sanallisesti (esimerkiksi vasempaan yläkulmaan sanoilla left top) tai CSS-osion etusivulla esiteltyjen mittayksiköiden avulla (esimerkiksi 20px 1em). Sanallisia ja numeraalisia ilmaisuja ei saa käyttää sekaisin (esim. 20px top).
| numero ja mittayksikkö | Määrittää taustan sijainnin tietyissä yksiköissä, esimerkiksi sentteinä tai pikseleinä. |
|---|---|
| top | Määrittää taustan yläreunaan. |
| bottom | Määrittää taustan alareunaan. |
| center | Määrittää taustan keskelle. |
| left | Määrittää taustan vasempaan reunaan. |
| right | Määrittää taustan oikeaan reunaan. |
| inherit | Taustan sijainnin määritys periytyy ylemmältä elementiltä. |
background-position:50px 20px;
background-position:right top;
background-position:center center;
background-position:left bottom;
Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Taustakuvan toistumistapa määritetään muotoilulla background-repeat.
| repeat | Taustakuva toistuu normaalisti. |
|---|---|
| repeat-x | Tausta toistuu vaakasuunnassa. |
| repeat-y | Tausta toistuu pystysuunnassa. |
| no-repeat | Taustakuva toistuu vain kerran. |
| inherit | Taustakuvan toistumismuotoilu periytyy ylemmältä elementiltä. |
Esimerkissä määritetään taustakuva toistumaan vaakasuunnassa.
background-repeat:repeat-x;
Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Pikakirjoitteella voidaan yhdistää kaikki taustamuotoilut yhden muotoilun alle. Kaikki yleisimmät selaimet tukevat pikakirjoitetta erinomaisesti, joten sen käyttö on riskitöntä ja jopa suositeltavaa suhteessa pitkiin taustamuotoiluihin.
background:url(taustakuvan osoite) toistuminen sijainti_x sijainti_y liikkuminen taustaväri;
Esimerkiksi:
background:url(iik.png) repeat-y 40px 10px fixed #eee;
Mikäli jotakin muotoilua ei halua määrittää, sen voi yksinkertaisesti jättää pois. Pikakirjoitteella voi ilmaista vaikka pelkän taustavärin:
background:#000;