[Alku]
Kaikki aihepiirit:
Luettelen alla aihealueittain tekemäni aihepiirit. Paluulinkkeinä tähän aihepiiriin on tämä valikko ja sivun yläreunassa oleva linkki Aihepiiriluettelo.
 
 
 Etsi sivuiltani: [Apua]
Aihepiiriluettelo > CSS-oppaan etusivu > Opassivut > 8. Miten CSS annetaan elementtien taustoille ja reunoille > Taustaominaisuudet (jakso 1/5)

Taustaominaisuudet

Koko dokumenttia koskevat varsin yksinkertaiset taustamäärittelyt eivät ole ongelmallisia ja ne voidaan HTML 3.2 -dokumenttien tavoin BODY elementille. Useimmin käytetyt taustaominaisuudet näkyvät alla olevassa esimerkissä ([M][S][Pw] - ne määritellään useimmiten pikakirjoitteina[S][Pw], mutta esitän ne tällä kertaa yksittäisinä ominaisuuksina ja selitän lyhyesti, mitä kukin ominaisuus merkitsee):

body
{background-color: white;
background-image: url(./Taulut/kierrevihko.gif); /* tämä vastaa HTML 3.2 -tason taustakuvamäärittelyä */
background-repeat: repeat-y; /* määrittelee sen, toistuuko kuva ja jos toistuu niin millä tavoin */
background-attachment:fixed; /* määrittelee sen, rullautuuko taustakuva sivun mukana vai ei */
background-position: 2px 0px;} /* määrittelee taustakuvan sijainnin */

Taustaväri (background-color) voi saada myös arvon transparent, jolloin emoelementin väri kuultaa lävitse. Vaikka jotkut testiohjelmat ehdottavat asettamaan aina background-color ominaisuuden, jos väri on määritetty, menettely ei ole aina järkevää. Riittää, että BODY-elemtin taustaväri toimii hyvin tekstivärin kanssa.

Toiston arvot ovat background-repeat: repeat (oletusarvo eli että taustakuva toistuu joka suuntaan), no-repeat (ei toistu lainkaan), repeat-x, repeat-y (y=toistuu pystysuunnassa; x=toistuu vaakasuunnassa).
Background-attachment:fixed tai scroll (taustakuva ei liiku/ liikkuu sivun rullauksen mukana (oletusarvo)).

Background-position: %, numero- tai avainsana-arvo. Arvo lasketaan elementin reunoista käsin lukuun ottamatta background-attachment:fixed, jolloin arvo lasketaan näyttöportin mukaan (viewport = ikkuna (window), jossa dokumentti sijaitsee). Prosentti- ja numeroarvoissa ensin annetaan etäisyys vasemmalta ja sitten ylhäältä. Seuraavassa taulukossa avainsana-arvot ja niiden vastaavat prosenttiarvot (olen korostanut arvot, jotka on merkitty samalla logiikalla kuin prosenttiarvot):

top left tai left top
top, top center ja center top
right top or top right
left, left center ja center left
center tai center center
right, right center ja center right
bottom left ja left bottom
bottom, bottom center ja center bottom
bottom right ja right bottom		 0% 0%
50% 0%
100% 0%
0% 50%
50% 50%
100% 50%
0% 100%
50% 100%
100% 100%

Taustaominaisuudet voi antaa mille elementille tahansa - erityisesti a:hover, a:active ja a:focus voi olla hyvin havainnolliset taustaominaisuudet. lue lisää seuraavilta sivuilta (kaikilla sivuilla ei ole paluulinkkiä tälle sivulle - käytä vaihtoehtoisia ikkunoita):

W3C: CSS1: CSS1 Test Suite; CSS2: 14 Colors ja Backgrounds; 14.2.1 Background properties[Pw].

Suositukseni:

  1. Suosittelen määrittelemään koko dokumentille tarkoitetut taustaominaisuudet sekä HTML että BODY elementeille. Varmista, että elementeillä ei ole reunuksia, marginaaleja tai täytteitä. Vähiten ongelmia syntyy käytettäessä JPG-kuvia.

  2. Kuvien tulee olla hyvälaatuisia. Ne pitää testata useilla sovelluksilla. Jos jokin sovellus ei pysty lukemaan kuvia ne tulee hylätä.

  3. Jos määrittelet taustakuville asemoinnin anna aina kaksi arvoa. Suosittelen pikseli- tai prosenttiarvojen käyttämistä. Älä käytä 10px center kaltaisia yhdistelmämäärittelyjä.

  4. Älä määrittele taustoja :first-letter ja :first-line pseudo-elementeille.

  5. En suosittele taustojen käyttöä :hover näennäisluokalle.

Selainkohtaisia huomautuksia:

  1. background-color: transparent ei toimi aina oikein kaikilla selaimilla, sillä jotkut selaimet määrittävän taustavärin BODY-elementin perusteella tilanteissa, joissa niin ei tule toimia. Jotkut selaimet saattavat tarvita näennäisluokkia käytettäessä tämän arvon kuvalinkeille (a:link img, a:visited img {background-color:transparent}) vaikka alla olevan elementin taustavärin pitäisi ilman muuta kuultaa lävitse. Määrittämällä toisinaan tietyn taustavärin ja toisinaan läpinäkyvän taustan syntyy ongelmia eikä background-color toimi aina halutulla tavalla.

  2. HTML ja BODY elementeille annetut taustaominaisuudet eivät aina toimi, jos sivut ovat kehysten sisällä. MS IE 4.x Windows kanssa läpinäkyvä GIF-kuva + the combination transparent GIF + taustaväri ei toimi koskaa oikein HTML elementin kanssa.

  3. Opera ei hyväksy takakenoviivaa (\) taustakuvien nimien poluissa (esim. .\kuvat\kuva1.gif).

  4. Sekä beeta että viralliset Opera 7.x -selaimet eivät hyväksy kaikkia GIF-kuvia taustakuviksi (myös eräät muut sovellukset, kuten esim. MS Windows XP on ongelmia niiden kanssa ja kuva, jonka kanssa Operalla on ongelmia ei toimi Windows XP:ssä pienoiskuvana (thumbnail)). Joskus, mutta hyvin harvoin Operalla ongelmia myös taustavärien kanssa. Käsittelen Operan erityisongelmia Operan ongelmia käsittelevällä lisäsivulla[S].

  5. background-position: 10px center kaltaiset yhdistelmät eivät toimi Mozilla Gecko -selaimissa.

  1. Jotkut background-position-ominaisuuden avainsana- ja prosenttiarvot (esim. center ja 50% 50%) eivät aina toimi Opera 5.12:ssa. Vaakatason prosenttiarvot toimivat ja niitä voi käyttää yhdessä pystytason pikseliarvojen kanssa, esim. 50% 200px (vika on korjattu Opera 6.x -sarjassa). Tosin CSS1 Test suite kaikki arvot toimivat P-elementin kanssa. Tämä asia tuntuu riippuvan elementistä ja Operalla on vaikeuksia nimenomaisesti elementin BODY kanssa. Suosittelen käyttämään seuraavan kaltaisia määrittelyjä:

    <style type="text/css" media="screen">
    <!--
    div#first {background: white url("../Kuvat/Css/Tree.gif) no-repeat 100px 65px;} /* mediatyypeille print ja projection on omat määrittelynsä */
    -->
    </style>

  2. Opera 6.x ei tue taustakuvia linkki- ja dynaamisille näennäisluokille[S] (korjattu Opera 7.0 Beta 2:ssa).

  3. Jos taulukoilla ja taulukkosoluilla on läpinäkyvä taustaväri ja taulukon taustaelementillä on taustakuva Opera näyttää vain taustalla olevan elementin taustavärin, ei taustakuvaa.

  4. Taustaominaisuudet eivät toimi Opera 7.x:ssä :first-letter näennäiselementille.

  5. :first-line näennäiselementille annetut taustaominaisuudet kaatavat MS IE 5.5 Windows -selaimen.

  1. Taustakuvien asemointi saattaa johtaa MS IE 4.x Windows -selaimissa siihen, että taustakuva menee muiden elementtien päälle.

  2. Jos taustakuva on GIF-animaatio, Opera 5.x ja vanhemmat selaimet näyttävät vain ensimmäisen kuvan (asia on korjattu uudemmissa versioissa ja olen testannut tämän asian Opera 6.04:lla).

  3. MS IE, Opera, Mozilla Gecko, Safari (Mac) ja Konqueror (Linux) tukevat PNG-kuvia mutta MS IE 4.x-6.x ja Opera 4.x-5.x eivät tue PNG-kuvien läpinäkyvyyttä. Eräissä Mozilla Gecko Linux-selaimissa ainakin osittain läpinäkyvät PNG-kuvat toimivat taustakuvina erittän huonosti ja Konquerorissa jotkin kuvat toimivat huonosti.

  4. background-attachment:fixed toimii vain sangen uusissa selaimissa. Testieni mukaan se toimii MS IE:ssä vain elementeille HTML ja BODY. Opera 4.x+ ja Mozilla Gecko -selaimissa se toimii laaja-alaisemmin. Tosin sivun rullaus saattaa Operalla aiheuttaa katkonaista tekstiä. Lisäksi on huomattava, että Opera 6.x laskee asemoinnin virheellisesti elementin omasta asemoinnista käsin (korjattu Opera 7.0 Beta 2:ssa).

  5. Taustakuvan asemointi ei toimi Netscape 4.x -selaimissa.

  6. Netscape 4.x ymmärtää virheellisesti taustakuvien sijaintipolu. Jos haluat taustakuvien toimivan sille oikein lue vihjeeni[S][Pw] miten suhteelliset viittaukset tulee määritellä Netscape 4.x -selaimille (vihjeet on englanniksi).

[Alku]