kuvat ja www

 
sisältö
 

 

 

 

Selain lataa ensimmäisenä näytölle taustakuvan ja sijoittelee tekstin ja muut kuvat sen päälle. Taustakuva voi olla hyvin pienikokoinen, koska selain toistaa kuvaa pysty- ja vaakasuunnassa niin, että se täyttää koko näytön. Taustakuva jatkuu myös sivua vieritettäessä.

Taustakuvat tallennetaan muodossa .gif tai .jpeg aivan kuten kaikki muutkin www-sivuilla käytettävät kuvat (taustakuvia ei kannata tallentaa interlace tai progressive muodossa). Taustakuva sijoitetaan <body>-komennon sisään attribuutilla background, jonka jälkeen tulee lainausmerkkien sisällä kuvan tiedostonimi tai URL-osoite (<body background="tausta.gif"/"URL">) samaan tapaan kuin muissakin www-sivujen kuvissa. Taustakuva hidastaa aina sivun latautumista, minkä vuoksi siitä kannattaa tehdä mahdollisimman pieni tiedostokooltaan.

Yhdellä sivulla voi olla ainoastaan yksi taustakuva, koska sivulla on vain yksi <body>-komento. Tämän lisäksi taustakuvaa on mahdollista käyttää taulukossa, jossa background-attribuutti voidaan sijoittaa <table>-komentoon (vaikuttaa kaikkiin taulukon soluihin), <tr>-komentoon (taustakuva tulee kyseisen rivin soluihin) tai <td>-komentoon (taustakuva tulee kyseiseen soluun).

Taustakuvaksi kannattaa yleensä valita kuva, jonka reunat sopivat yhteen (vasen- ja oikea- sekä ylä- ja alareuna), jolloin muodostuu saumattoman yhtenäinen kuvapinta ruudukkomaisen pinnan sijasta. Saumattomuus saadaan aikaan esimerkiksi siten, että varsinaisen kuvan ympärille jätetään riittävästi tyhjää yksiväristä aluetta. Silloin kun kuvan yksityiskohdat jatkuvat kuvan reunojen yli, on saumattoman vaikutelman aikaansaaminen hieman työläämpää. Monissa kuvankäsittelyohjelmissa on onneksi offset-filtteri, joka järjestää uudelleen kuvan vastakkaiset reunat ja luo saumattomalta vaikuttavan ulkoreunan. Saumattoman vaikutelman voi tietysti tehdä itsekin ilman offset-suodatinta.

Monilla www-sivuilla käytetty vasen reunapalkki on helpoiten toteutettavissa taustakuvana. Web-guru David Siegel on todennut 25 x 1200 pikselin kokoisen kuvan sopivimmaksi tähän tarkoitukseen (värillisen reunapalkin osuus kuvan leveydestä voi olla esim. 120 pikseliä). Tällainen taustakuva voisi aivan hyvin olla ainoastaan yhden pikselin korkuinen, mutta selain, joka joutuu toistamaan samaa kuvaa kunnes koko näyttö on täyttynyt, selviytyy nopeammin 25 pikseliä korkeasta kuvasta kuin yhden pikselin korkuisesta. 1200 pikselin levyinen kuva taas takaa sen, että useimmilla näytöillä vasen reunapalkki ei toistu kuvaruudun oikeassa laidassa.

Taustakuva voi joissain tapauksissa olla tehokas tunnelmaa luova tekijä, mutta se voi myös helposti vaikeuttaa sivun luettavuutta, varsinkin jos kuvan ja tekstin välillä ei ole tarpeeksi kontrastia. Pitkien tekstimassojen lukeminen kirjavalta tai levottomalta pohjalta on enemmän kuin tuskallista.

 


 

 

 

 
linkkejä lähteet videokuva gif-animaatiot klikattavat kuvat kuvan lisääminen mistä kuvia? taustakuva kuvien koko kuvaformaatit bittikartta- ja vektorikuvat kuvituksen suunnittelu tekijänoikeudet etusivu