Päivitetty: 10.03.2003.

Tausta ja Väri

CSS:n avulla voidaan määritellä lähes jokaiselle HTML-elementille oma väri, taustaväri ja/tai taustakuva. Lisäksi taustakuvan voi kiinnittää tai toistaa vaaka- tai pystysuorassa.


Tausta ja Väri

color

Elementin, yleensä tekstin, värin määritys.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: <väri>
Oletusarvo: Elementin oletusväri (teksti yleensä musta)
Käyttö: Kaikki elementit
Periytyvä: Kyllä
Prosenttiarvo: Ei
<Väri>
Väri voidaan määritellä usealla eri tavalla. Voit käyttää värin nimeä, Hex-desimaaleja tai prosentteja.

color esimerkki:

p {color: teal }

<P> color: teal </P>

Lisää esimerkkejä.

!Lisätietoja väreistä CSS:n yksiköt -kohdasta.

<< Alkuun


background-color

Määrittää elementin taustan värin.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: <väri> | transparent
Oletusarvo: transparent (läpinäkyvä)
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: Ei
<Väri>
Värin määritys toimii kuten yllä.
Transparent
Kaikilla HTML-elementeillä on oletuksena määritys: background-color: transparent. Eli niiden tausta on läpinäkyvä.

background-color esimerkki

p {background-color: silver }

<p>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . </P>

Lisää esimerkkejä.

!Background-color ja -image esimerkkejä ei tulosteta, koska ne eivät näy paperilla oikein!

<< Alkuun


background-image

Elementin taustakuva.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: <url> | none
Oletusarvo: none (ei mitään)
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: Ei
<url>
Käytettävän taustakuvan url (Universal Resource Locator), eli osoite josta kuva löytyy. Url voi olla:
- absoluuttinen http://www.domain.fi/html/kuvat/kuva.jpg
- suhteellinen ../kuvat/kuva.jpg
none
Elementillä ei ole taustakuvaa. Tämä arvo on oletuksena kaikilla elementeillä.

background-image esimerkki

p {background-image: url(imge/pilvi1.jpg)}

<P>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . </P>

Lisää esimerkkejä.

!Taustakuva voidaan määritellä mille tahansa html-elementille, ei siis vain body-elementille.

<< Alkuun


background-repeat

Taustakuvan toisto.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: repeat | repeat-x | repeat-y | no-repeat
Oletusarvo: repeat
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: Ei

background-repeat esimerkki

p { background-repeat: no-repeat }

<P>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . </P>

Lisää esimerkkejä.

!background-image täytyy tietysti määritellä ensin.

<< Alkuun


background-attachment

Taustakuvan kiinnitys/vieritys.

Yhteensopivuus: CSS1 ja CSS2 (IE4, Opera 4.0)
Sallitut arvot: scroll | fixed
Oletusarvo: scroll
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: Ei

background-attachment esimerkki

p { background-attachment: scroll}

<P>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . </P>

Lisää esimerkkejä.

!'background-image' täytyy tietysti määritellä ensin. Kannatta myös määrittää 'background-repeat'.

<< Alkuun


background-position

Taustakuvan paikka sivulla.

Yhteensopivuus: CSS1 ja CSS2 (IE4, Opera 3.6)
Sallitut arvot: [<%> | <pituus>]{1,2} | [top | center | bottom] || [left | center | right]
Oletusarvo: 0% 0%
Käyttö: block-level sekä korvatut elementit
Periytyvä: Ei
Prosenttiarvo: Suhteutetaan kuvan kokoon

background-position esimerkki

p {background-position: right }

<P>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . </P>

Lisää esimerkkejä.

<< Alkuun


background

Background on pikakirjoite, jolla voidaan määritellä seuraavien CSS ominaisuuksien arvot: background-color, background-image, background-repeat, background-attachment sekä background-position.

Yhteensopivuus: CSS1 ja CSS2 (IE4, Opera 3.6, NN 4 tukee osittain)
Sallitut arvot: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Oletusarvo: Ei ole käytössä pikakirjoitteessa
Käyttö: Kaikki elementit
Periytyvä: Ei
Prosenttiarvo: Käytössä <background-position> -arvolla

background esimerkki

p { background:
url(image/pilvi3.gif)
no-repeat
center
beige }

<P>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . </P>

Lisää esimerkkejä.

<< Alkuun


© Petteri Perälä 1999 - 2003.
E-mail: [ petepe@mbnet.fi ].

Valid CSS! Valid HTML 4.01!