Taustaväri

CSS:llä taustaväri voidaan lisätä lähes jokaiseen elementtiin ja tagiin. Taustakuva määritellään BACKGROUND-attribuutilla ja Väri voidaan ilmoittaa HEX-, RGB- ja NAME-arvoilla. Katso HTML-oppaan kohta värit.

background:arvo;

Laitetaan esimerkiksi kappaleenjaon (P) taustaväriksi punainen.

<p style="background:red;">Tämän kappaleen taustaväri on punainen.</p>

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

Taustakuva

Taustakuva määritellään myös BACKGROUND-attribuutilla. Tällöin arvoksi annetaan url('taustakuvan sijainti').

background:url('taustakuvan sijainti');

Laitetaan esimerkiksi DIV-elementille taustakuva.

<div style="background:url('taustakuva.png');"></div>

HUOM! Esimerkissä olen lisännyt elementille myös leveyden ja korkeuden.

Taustakuvan toistuminen

Joskus on tarpeellista saada taustakuva toistumaan, tai estää toistuminen. Tämä voidaan toteuttaa BACKGROUND-REPEAT-attribuutilla. Arvoina voidaan käyttää REPEAT (toistuu vaaka- ja pystysuunnassa), REPEAT-X (toistuu vain vaakatasossa), REPEAT-Y (toistuu vain pystysuunnassa), tai NO-REPEAT (ei toistu ollenkaan). Jos toistuvuutta ei määritellä, niin oletuksena käytetään arvoa REPEAT.

background-repeat:arvo;

Tehdään pari esimerkkiä. Esimerkissä määritellään DIV-elementille taustakuva ja sen toistuvuus. Jokaisessa esimerkissä käytetään samaa taustakuvaa, joka on 50px * 50px kokoinen. Esimerkeissä olen lisännyt myös elementtiin reunukset, sekä määrittänyt elementtien kooksi 200px * 200px havainnollistaakseni asian.

REPEAT:

<div style="background:url('taustakuva.png'); background-repeat:repeat;"></div>

REPEAT-X:

<div style="background:url('taustakuva.png'); background-repeat:repeat-x;"></div>

REPEAT-Y:

<div style="background:url('taustakuva.png'); background-repeat:repeat-y;"></div>

NO-REPEAT:

<div style="background:url('taustakuva.png'); background-repeat:no-repeat;"></div>

Taustakuvan sijainti

Taustakuvan sijaintia voidaan muuttaa BACKGROUND-POSITION-attribuutilla. Arvo voidaan ilmoittaa kirjoittamalla sijainti, tai esimerkiksi käyttämällä numereenisia arvoja, kuten pikseleitä.

background-position:arvo;

Tehdään muutama esimerkki. Olen esimerkeissä poistanut taustakuvan toistuvuuden käytöstä selventääkseni asiaa. Lisäksi olen lisännyt myös elementtiin reunukset, sekä määrittänyt elementtien kooksi 100px * 100px.

LEFT TOP:

<div style="background:url('taustakuva.png'); background-position:left top;"></div>

LEFT CENTER:

<div style="background:url('taustakuva.png'); background-position:left center;"></div>

LEFT BOTTOM:

<div style="background:url('taustakuva.png'); background-position:left bottom;"></div>

RIGHT TOP:

<div style="background:url('taustakuva.png'); background-position:right top;"></div>

RIGHT CENTER:

<div style="background:url('taustakuva.png'); background-position:right center;"></div>

RIGHT BOTTOM:

<div style="background:url('taustakuva.png'); background-position:right bottom;"></div>

CENTER TOP:

<div style="background:url('taustakuva.png'); background-position:center top;"></div>

CENTER CENTER:

<div style="background:url('taustakuva.png'); background-position:center center;"></div>

CENTER BOTTOM:

<div style="background:url('taustakuva.png'); background-position:center bottom;"></div>

Taustakuvan siirtyminen

Taustakuva voidaan laittaa siirtymään aina sivua vieritettäessä, tai se voidaan pitää paikoillaan. Siirtyminen voidaan tehdä BACKGROUND-ATTACHMENT-attribuutilla. Mahdollisia arvoja ovat FIXED (taustakuva siirtyy vierittäessä) ja SCROLL (taustakuva ei siirry). Jos siirtymistä ei määritellä, niin oletuksena käytetään arvoa SCROLL.

background-attachment:arvo;

<< Lista-elementit Edellinen osa || Seuraava osa Reunukset >>