Tekstin väri ja taustan ominaisuudet (Background and Color properties)

• Color
• Background Color
• Background Image
• Background Repeat
• Background attachment
• Background Position
• Background

Color

color ominaisuus määrittelee elementin (Elementin sisällä olevan tekstin) värin. Katso yksiköt sivulta mahdolliset värien määritelmät. Esimerkkeinä:

H1 { color : blue }
H2 { color : #000080 }
H3 { color : #0C0 }

Ristiriitojen välttämiseksi color ja backgound-color ominaisuudeksia kannattaa käyttää yhdessä. (Ei tule samanväristä tekstiä ja taustaa, jolloin luettavuus voisi sananmukaisesti olla kyseenalainen)

Background Color

background-color ominaisuus määrää elementin taustan värin. Esimerkiksi

BODY { background-color : white }
H1 { background-color : #000080 }

Konfliktien välttämiseksi käyttäjän tyylisivujen kanssa background-image ominaisuus tulisi olla aina määritetty kun käytetään background-color ominaisuutta. Useimmissa tapauksissa background-image : none on toimiva.

background ominaisuutta voidaan käyttää oikotienä ja se on myös hieman paremmin tuettu vanhemmissa selaimissa kuin background-color.

Background Image

background-image ominaisuus määrittää elementin taustakuvan. Esimerkkeinä

BODY { background-image : url(/images/tausta.gif) }
P { background-image : url(http://www.htmlhelp.com/bg.png) }

Kun background-image on määritetty tulisi myös käyttää background-color ominaisuutta sen varalta että kaikilla kuvien lataus ei välttämättä ole päällä.

background ominaisuutta voidaan käyttää oikotienä ja se on myös hieman paremmin tuettu vanhemmissa selaimissa kuin background-image.

Background-repeat

background-repeat määrää kuinka taustakuva toistetaan. repeat arvo toistaa taustakuvaa sekä pysty että vaakasuunnassa ja no-repeat poistaa taustakuvan toiston. repeat-x arvo toistaa kuvaa vaakasuunnassa. repeat-y arvo toistaa kuvaa pystysuunnassa. Esimerkiksi:

BODY { background : white url(tausta.gif);
       background-repeat : repeat-x }

toistaa kuvaa vain vaakasuunnassa.

background ominaisuutta voidaan käyttää oikotienä ja se on myös hieman paremmin tuettu vanhemmissa selaimissa kuin background-repeat.

Background Attachment

background-attachment ominaisuus määrittelee vierittyykö taustakuva tekstin mukana vai pysyykö se paikallaan vaikka sivua rullataan esim. alaspäin. Tämän ohjeen taustan background-attachment arvo on fixed. Esimerkiksi seuraava määrittää kiinteän taustakuvan.

BODY { background : white url(tausta.gif) ;
       background-attachment : fixed }

background ominaisuutta voidaan käyttää oikotienä ja se on myös hieman paremmin tuettu vanhemmissa selaimissa kuin background-attachment .

Background Position

background-position ominaisuus määrittelee taustakuvan oletussijainnin. Tämä ominaisuus voidaan määrittää mille tahansa block ja "replaced" elementille. (Replaced on elementti josta tiedetään vain olennaiset mitat, näitä ovat IMG , INPUT, TEXTAREA, SELECT ja OBJECT.)

Helpoin tapa taustakuvan sijainnin määräämiseksi on käyttää valmiita avainsanoja:

• Vaakasuuntainen sijoitus: left, center ja right (vasen, keskellä, oikealla)
• Pystysuuntainen sijoitus: top, center ja bottom (ylhäällä, keskellä, alhaalla)

Prosentteja ja pituuksia voidaan käyttää elementin taustakuvan sijainnin määrittämiseen. Prosentit ovat suhteellisia elementin kokoon. Vaikka pituuksia voidaan käyttää niitä ei suositella niiden huonon sopeutumisen eri näyttätarkkuuksiin vuoksi.

Prosentteja ja pituuksia käytettäessä ensin on vaakasuunnan arvo ja sitten pystysuunnan. Esimerkiksi 20% 65% määrittää taustakuvan vasemman yläkulman paikaksi 20% oikealle elementin vasemmasta reunasta ja 65% alaspäin yläreunasta. Tai arvot 5px 10px määrittää taustakuvan vasemman yläkulman paikaksi 5 pikseliä oikealle ja 10 pikseliä alaspäin elementin vasemmasta yläkulmasta.

Jos vain vaakasuuntainen arvo on annettu, on pystysuuntainen aina 50%. Prosenttien ja pituuksien yhdistelmät ovat sallittuja, samoin myös negatiiviset arvot. Esimerkiksi 10% -2cm on sallittu. Kuitenkaan prosentteja ja pituuksia ei voida yhdistää avainsanoihin.

Avainsanat vastaavat seuraavia arvoja:

• top left = left top = 0% 0%
• top = top center = center top = 50% 0%
• right top = top right = 100% 0%
• left = left center = center left = 0% 50%
• center = center center = 50% 50%
• right = right center = center right = 100% 50%
• bottom left = left bottom = 0% 100%
• bottom = bottom center = center bottom = 50% 100%
• bottom right = right bottom = 100% 100%

Jos taustakuvalle on määritetty fixed arvo jolloin se on kiinnitetty sivun taustaan, niin silloin kuvan sijainti on suhteellinen sivun eikä elementin taustaan.

background ominaisuutta voidaan käyttää oikotienä ja se on myös hieman paremmin tuettu vanhemmissa selaimissa kuin background-position.

Background

background on oikotie muihin taustan ominaisuuksiin. Joitain esimerkkejä:

BODY { background : white url(http://www.htmlhelp.com/bg.gif) }
BLOCKQUOTE { background : #7FFFD4 }
P { background : url(../background/background.png) #F0F8FF fixed }
TABLE { background : #0C0 url(leaves.jpg) no-repeat bottom right }

Arvo jota ei määritetä saa automaattisesti oletusarvon. Esimerkiksi kolmessa ylimmässä säännössä background-position saa automaattisesti arvon 0% 0% .

Konfliktie välttämiseksi käyttäjän tyylisivujen kanssa, background ja color pitää aina määrittää molemmat.