Tuunaa taustakuvasi

Viimeksi esittelin miten templaten värejä saa vaihdettua heksakoodien avulla. Tänään valitsin aiheekseni taustakuvien sijoittamisen koodailun avulla. Ja kukaan palikka ei nyt pelästy, tämä on oikeasti yksinkertaista!

Seuraavaa listaa olen itse lyhentänyt ja muokannut, mutta se on silti pöllitty täältä. Fontin väri on punainen ihan vain siitä iloisesta syystä, että se jota tämä lista ei kiinnosta pätkääkään, voi entistä helpommin hypätä sen yli. Listan jälkeen kerron, miten allaolevia tageja voi helposti hyödyntää.

• background-image:url('taustakuvasi.jpg') Taustakuva, jonka osoite tulee sulkeisiin

• background-repeat:repeat-y Taustakuvaa toistetaan vain y-akselin suuntaisesti eli pystysuoraan

• background-repeat:repeat-x Taustakuvaa toistetaan vain x-akselin suuntaisesti eli vaakasuoraan

• background-repeat:no-repeat Taustakuvaa ei toisteta lainkaan, taustakuva näkyy sivulla vain yhtenä kokonaisena kuvana.

• background-attachment:fixed Tausta pysyy paikoillaan kun sivua vieritetään

• background-attachment:scroll Normaali taustan olotila

• background-position:100px 10px Taustakuva sijoittuu vaakasuuntaisesti 100px:n päähän ja pystysuuntaisesti 10px:n päähän

• background-position:top left Taustakuva sijoittuu 'ylös vasemmalle'

• background-position:top right Taustakuva sijoittuu 'ylös oikealle'

• background-position:right Taustakuva sijoittuu 'oikealle keskelle'

• background-position:bottom right Taustakuva sijoittuu 'alas oikealle'

• background-position:bottom Taustakuva sijoittuu 'alas keskelle'

• background-position:bottom left Taustakuva sijoittuu 'alas vasemmalle'

• background-position:left Taustakuva sijoittuu 'vasemmalle keskelle'

• background-position:center Taustakuva sijoittuu keskelle, sekä pysty että vaakasuuntaisesti

Ja sitten käytännössä: Ensimmäiseksi pitää etsiä omasta templatesta se kohta, jossa tausta määritellään. Se löytyy yleensä melko alusta body:n alta. Jos sinulla ei jo ole taustakuvaa, sen sijalla on luultavasti pelkkä taustavärikoodi, esimerkiksi background: #ffffff; jos tausta on valkoinen. Korvaa se tällä: background-image:url('taustakuvasi.jpg'), huomaa että heittomerkit kuuluvat mukaan. Laita muut määreet sen alle (esimerkiksi background-repeat:repeat-y) omalle rivilleen jä päätä merkillä ;.

HUOM: Ainakaan kun minä yritin, en saanut mahdolliseksi että olisi sekä taustakuva että taustaväri. Jos joku tietää jonkun kikan, kertokoon sen nyt tai vaietkoon iäksi!

Esimerkki: Tällainen litania saa aikaan taustakuvan, joka toistuu oikeassa reunassa pystysuoraan ja pysyy paikallaan kun sivua vierittää:

background-image:url('taustakuvasi.jpg');
background-repeat:repeat-y;
background-position:right;
background-attachment:fixed;

Mutta entä jos minulla ei ole mitään taustakuvaksi?

Taustakuvaksi käy oikeasti mikä tahansa sopivan kokoinen kuva. Netistäkin löytyy kivoja taustakuvia, joita yleensä saa käyttää ilmaiseksi, kunhan muistaa ettei suoralinkitä. Täältä löytyy esimerkiksi ihan kattava kokoelma...

PS: Jostakin syystä tuo ylempänä oleva lista (kuten koko muukin blogi) näyttää aivan hirveältä IE:ssä (ainakin uusimmassa). Tässä on taas yksi hyvä syy vaihtaa nyt heti Mozilla Firefoxiin, eikö?