Värin ja taustavärin ominaisuudet

• color
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background

Tässä luvussa käsitellään elementin värin, taustan ja taustavärin ominaisuuksia. Käsiteltävät ominaisuudet ovat color, background-color, background-image, background-repeat, background-attachment, background-position ja background.

color

color-ominaisuudella määritellään elementin etualan väri, joka toimii esimerkiksi tekstikappaleissa kirjasimen värinä.

color: <väri>;

color-ominaisuus on periytyvä ja sitä voidaan käyttää kaikkien elementtien yhteydessä.

<väri> voidaan antaa tässä luvussa määritellyllä tavalla. Tarkempi esimerkki värin antamisesta background-color-ominaisuuden yhteydessä.

background-color

background-color-ominaisuuden avulla voidaan määritellä elementeille taustaväri. Ominaisuudelle voidaan antaa värin määritys tässä luvussa määritellyllä tavalla tai taustaväri voidaan laittaa läpinäkyväksi arvolla transparent. Elementeillä on oletuksena taustavärin arvona transparent. Vaikka background-color-ominaisuus ei ole periytyvä, voidaan elementti asettaa läpinäkyväksi, jolloin ominaisuus näyttää periytyvän.

background-color: <väri> | transparent;

background-color-ominaisuus ei ole periytyvä, mutta sitä voidaan käyttää kaikkien elementtien yhteydessä.

Seuraavassa esimerkissä havainnollistetaan värin ja taustavärin käyttämistä tyyleissä. Esimerkissä body-elementtiin on määritelty taustaväriksi hopean harmaa ja tekstin väriksi valkea. h1-elementin taustaväriksi on määritelty läpinäkyvyys ja tekstin väriksi tulee valkea. p-elementin väriksi on määritelty punainen, mutta taustaväriksi on määritelty läpinäkyvä. strong-elementin tekstin väriksi on määritelty punainen ja taustaväriksi keltainen.

body {
  color: white;
  background-color: silver;
}

h1 {
  color: #ffffff;
  background-color: transparent;
}

p {
  color: #ff0000;
  background-color: transparent;
}

strong {
  color: red;
  background-color: yellow;
}

Seuraavassa kuvassa on edellisen esimerkin tyyleillä muotoiltu tiedosto.

Kuva 2: Esimerkki taustavärin ja värin käytöstä dokumentissa.

background-image

background-image-ominaisuuden avulla voidaan elementille määritellä taustakuva. background-image-ominaisuutta käytettäessä kannattaa käyttää myös background-color-ominaisuutta. Jos taustakuvaa ei pystytä näyttämään, niin näkyville tulee ainakin taustaväri.

background-image: <url> | none;

background-image-ominaisuus ei ole periytyvä, mutta sitä voidaan käyttää kaikkien elementtien yhteydessä.

Seuraavassa esimerkki background-image-ominaisuuden käytöstä body-tyylin sisällä.

body {
  color: #000000;
  background-color: white;
  background-image: url(./kuvat/tausta.gif);
}

Seuraavassa kuvassa edellisen esimerkin mukainen taustakuvan määrittely. Taustakuvan valinnassa pitää olla hyvin tarkkana, koska huonosti valittu taustakuva voi heikentää dokumentin luettavuutta, kuten esimerkissä on käynyt. Esimerkin taustakuva on vain 50*50 pikselin kokoinen, joten taustakuvaa on toistettu koko taustan alalle.

Kuva 3: Esimerkki taustakuvan määrittämisestä.

background-repeat

background-repeat-ominaisuuden avulla voidaan kuvaa toistaa ominaisuuden määrittelemässä suunnassa, jos taustakuva on kooltaan pienempi kuin selainikkunassa näytettävä alue. Arvo repeat toistaa kuvaa koko taustan yli sekä pysty- että vaakasuunnassa. Arvolla repeat-x toistetaan kuvaa vaakasuunnassa ja arvolla repeat-y toistetaan kuvaa pystysuunnassa. Arvolla no-repeat kuva esiintyy taustalla vain kerran.

background-repeat: repeat | repeat-x | repeat-y | no-repeat;

background-repeat-ominaisuus ei ole periytyvä, mutta sitä voidaan käyttää kaikkien elementtien yhteydessä. Oletuksena taustakuvaa toistetaan sekä vaaka- että pystysuunnassa.

Seuraavassa esimerkissä taustakuvaksi on määritelty tausta.gif-niminen kuva. Taustakuva toistetaan taustalla ainoastaan pystysuunnassa. Koska taustakuvaa ei toisteta koko näytön alalla, niin taustan väriksi on määritelty valkoinen.

body {
  color: #000000;
  background-color: white;
  background-image: url(./kuvat/tausta.gif);
  background-repeat: repeat-y;
}

Seuraavassa kuvassa on edellä olevan esimerkin tyyleillä muokattu dokumentti. Kuvassa taustakuvaa on toistettu ainoastaan pystysuunnassa.

Kuva 4: Esimerkki taustakuvan toistamisesta pystysuunnassa.

background-attachment

background-attachment-ominaisuuden avulla voidaan vaikuttaa taustakuvan liikkumiseen dokumentti-ikkunaa rullattaessa. Arvolla fixed taustakuva on kiinnitetty selainikkunaan, joten kuva ei liiku sisällön vierittämisen mukana. Arvolla scroll taustakuva ei ole kiinnitetty selainikkunaan, joten taustakuva liikkuu sisällön mukana, joten taustakuva näyttää olevan kiinni vieritettävässä dokumentissa.

background-attachment: scroll | fixed;

background-attachment-ominaisuus ei ole periytyvä, mutta sitä voidaan käyttää kaikkien elementtien yhteydessä.

Seuraavassa esimerkissä taustakuvaa ei vieritetä dokumentin sisällön mukaan, joten taustakuviointi pysyy aina samannäköisenä dokumentin yläreunassa.

body {
  color: #000000;
  background-color: white;
  background-image: url(tausta.gif);
  background-repeat: repeat-x;
  background-attachment: fixed;
}

background-position

background-position-ominaisuudella voidaan määritellä taustakuvalle tarkka sijainti. Arvot voidaan antaa prosentuaalisesti selainikkunan vasemmasta ylälaidasta lähtien, jota vastaa arvo 0% 0%. Esimerkiksi arvo 100% 0% tarkoittaa elementin oikeaa yläkulmaa. Prosentteina ja pituutena annettuista arvoista ensin annetaan vaakasuuntaan vaikuttava arvo ja sen jälkeen vasta pystysuuntaan vaikuttava arvo. Kuvan sijoittumisen vaakasuunnassa voi myös määritellä avainsanojen left, center ja right avulla vasemmalle, keskelle ja oikealle. Vastaavasti kuvan sijoittuminen pystysuunnassa voidaan määritellä avainsanojen top, center ja bottom avulla ylös, keskelle ja alas.

background-position: [<prosentti> | <pituus>] {1,2} | [left | center | right] || [top | center | bottom];

background-position-ominaisuus ei ole periytyvä ja sitä voidaan käyttää ainoastaan lohkotason sekä korvattavien elementtien yhteydessä.

Seuraavissa esimerkeissä dokumentin taustakuvan sijoittuminen määritellään background-position-ominaisuuden avulla. Seuraavassa esimerkissä kuva määritellään dokumentti-ikkunan keskelle ja kuva kiinnitetään selainikkunaan, jolloin se pysyy keskellä selainikkunaa, vaikka dokumenttia vieritettäisiin ikkunassa.

body {
  color: #000000;
  background-color: white;
  background-image: url(./kuvat/tausta.gif);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-attachment: fixed;
}

Seuraavassa kuvassa on edellisen esimerkin tyylimääritystä käyttävä HTML-dokumentti.

Kuva 5: Esimerkki erilaisista taustakuvalle annettavista ominaisuuksista.

background

background-ominaisuudella voidaan vaikuttaa kaikkiin edellä käsiteltyihin taustan ominaisuuksiin. Ominaisuuden arvoilla on tietty järjestys, joka on nähtävillä seuraavasta syntaksista.

background: <background-color> || <background-image> || <background-repeat> || 
<background-attachment> || <background-position>;

Background-ominaisuus ei ole periytyvä, mutta sitä voidaan käyttää kaikkien elementtien yhteydessä.

Seuraavassa esimerkissä on määritelty kaikki background-position-ominaisuuden yhteydessä olleen esimerkin ominaisuudet background-ominaisuuden avulla.

body {
  color: #000000;
  background: white url(./kuvat/tausta.gif) no-repeat fixed 50% 50%;
}

Taustakuvia voidaan todellakin käyttää kaikkien elementtien yhteydessä. Seuraavassa esimerkissä taustakuvia on määritelty myös dokumentin muihin elementteihin. Esimerkin mukaisia taustakuvan määrittelyja kannattaa harkita erityisen huolellisesti, koska taustakuva usein vaikeuttaa dokumentin lukemista.

body {
  color: #000000;
  background-color: white;
  background-image: url(./kuvat/tausta.gif);
  background-repeat: repeat;
}

h1 {
  color: #000000;
  background-image: url(./kuvat/marmori.gif);
  background-color: white;
  background-repeat: repeat-y;
}

p {
  color: #000000;
  background-color: white;
  background-image: url(./kuvat/tiilet.gif);
  background-repeat: repeat-x;
}

strong {
  color: #000000;
  background-color: white;
}

Kuva 6: Taustakuvan määrittelyjä eri elementteihin.